Rumah > Artikel > hujung hadapan web > Apakah kaedah komunikasi vue?
Kaedah komunikasi: 1. Subkomponen menetapkan atribut props dan mentakrifkan parameter yang akan diterima daripada komponen induk; 2. Subkomponen mencetuskan peristiwa tersuai melalui $emit untuk berkomunikasi. 3. Gunakan rujukan untuk komunikasi. 4. Gunakan EventBus untuk komunikasi. 5. Gunakan $parent atau $root untuk berkomunikasi. 6. Gunakan $attrs untuk berkomunikasi dengan $pendengar. 7. Gunakan menyediakan dan menyuntik untuk berkomunikasi. 8. Gunakan vuex.
Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.
Kita semua tahu bahawa komponen adalah salah satu fungsi vue yang paling berkuasa penerima untuk mencapai tujuan tertentu. Secara umum, sebarang trafik maklumat ialah komunikasi antara komponen, yang bermaksud komponen (.vue) menghantar maklumat dalam beberapa cara untuk mencapai tujuan tertentu Contohnya, apabila kami menggunakan komponen jadual dalam rangka kerja UI, kami boleh pergi ke jadual komponen. Data tertentu dihantar masuk, dan ini pada asasnya membentuk komunikasi antara komponen.
Pada zaman dahulu, orang ramai menghantar mesej melalui rumah penginapan, merpati terbang, penggera kebakaran suar, simbol, bahasa, mata, sentuhan, dan lain-lain. Pada masa kini, dengan perkembangan pesat sains dan teknologi, komunikasi pada asasnya diselesaikan dengan berwayar atau tanpa wayar Pelbagai kaedah komunikasi seperti telefon berwayar, telefon talian tetap, telefon tanpa wayar, telefon bimbit, Internet dan juga telefon video telah muncul satu. Selepas satu lagi. Daripada petikan ini, kita dapat melihat bahawa intipati komunikasi adalah penyegerakan maklumat kembali kepada vue Setiap komponen mempunyai skopnya sendiri sering memerlukan Biarkan komponen berkongsi data, yang juga merupakan tujuan komunikasi komponen Biarkan mereka berkomunikasi antara satu sama lain, supaya membentuk sistem yang organik dan lengkap
data pas props
Children.vue
props:{ // 字符串形式 name:String // 接收的类型参数 // 对象形式 age:{ type:Number, // 接收的类型为数值 defaule:18, // 默认值为18 require:true // age属性必须传递 } }
KomponenFather.vue
<Children name="jack" age=18 />
$emit mencetuskan peristiwa tersuai
Senario yang berkenaan: komponen anak menghantar data kepada induk Komponen subkomponen mencetuskan peristiwa tersuai melalui $emit dan parameter kedua $emit ialah nilai yang diluluskan Komponen induk mengikat pendengar untuk mendapatkan parameter yang diluluskan oleh subkomponen
Chilfen.vue
this.$emit('add', good)
Father.vue
<Children @add="cartAdd($event)" />
ref
ref
ref
<Children ref="foo" /> this.$refs.foo // 获取子组件实例,通过子组件实例我们就能拿到对应的数据
EventBus
// 创建一个中央时间总线类 class Bus { constructor() { this.callbacks = {}; // 存放事件的名字 } $on(name, fn) { this.callbacks[name] = this.callbacks[name] || []; this.callbacks[name].push(fn); } $emit(name, args) { if (this.callbacks[name]) { this.callbacks[name].forEach((cb) => cb(args)); } } } // main.js Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上 // 另一种方式 Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能Children2.vue
this.$bus.$emit('foo')
this.$bus.$on('foo', this.handle)
$ibu bapa atau $ root
this.$parent.on('add',this.add)
this.$parent.emit('add')
$attrs dengan $ pendengar
包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。
可以通过 v-bind="$attrs" 传⼊内部组件
// child:并未在props中声明foo <p>{{$attrs.foo}}</p> // parent <HelloWorld foo="foo"/>
// 给Grandson隔代传值,communication/index.vue <Child2 msg="lalala" @some-event="onSomeEvent"></Child2> // Child2做展开 <Grandson v-bind="$attrs" v-on="$listeners"></Grandson> // Grandson使⽤ <div @click="$emit('some-event', 'msg from grandson')"> {{msg}} </div>
provide 与 inject
在祖先组件定义provide属性,返回传递的值
在后代组件通过inject接收组件传递过来的值
祖先组件
provide(){ return { foo:'foo' } }
后代组件
inject:['foo'] // 获取到祖先组件传递过来的值
vuex
适用场景: 复杂关系的组件数据传递
Vuex作用相当于一个用来存储共享变量的容器
state用来存放共享变量的地方
getter,可以增加一个getter派生状态,(相当于store中的计算属性),用来获得共享变量的值
mutations用来存放修改state的方法。
actions也是用来存放修改state的方法,不过action是在mutations的基础上进行。常用来做一些异步操作
父子关系的组件数据传递选择 props 与 $emit进行传递,也可选择ref
兄弟关系的组件数据传递可选择$bus,其次可以选择$parent进行传递
祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject
复杂关系的组件数据传递可以通过vuex存放共享的变量
Atas ialah kandungan terperinci Apakah kaedah komunikasi vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!