组件通信
组件间进行数据的传递称为组件通信
父子组件通信
父传子：利用属性(props)的方式传递数据
- 子组件定义时，在选项中使用 props 定义组件可接收的属性
- 父组件中使用到子组件（标签）时，在标签内部书写需要传递给子组件的数据（是 name=value 键值对格式的属性）
子传父：利用事件方式传递数据
- 父组件中使用到子组件标签时，利用 v-on 注册一个自定义的事件监听，通常引用在父组件中定义的 methods 方法去处理接收到的数据
- 在子组件中需要传递数据时，调用 this.$emit(eventName, data) 触发在父组件中绑定的自定义事件并传递数据即可（$emit() 的第二个参数是需要传递给父组件的数据）
示例：页面中子元素内容为有父组件传递的信息:小明男。但我们点击子元素时，父元素也会发生改变这是父组件内容：{ “name”: “jack”, “age”: 20 }
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divid="app"><father></father></div><scriptsrc="../libs/vue.js"></script><script>
Vue.component('father',{template:`
<div>
<div >这是父组件内容：{{message}}</div>
<son name="小明" sex="男" v-on:listenSon="handlerListen"></son>
</div>
`,//这里无论是父传子，还是子传父，都是在<son>上作为媒介传输的//这里name和sex是父元素传递给子元素的//v-on:listenSon自定义的事件，父元素监听子元素传递的信息的，listenSon是传输时的名字（ip）data(){return{message:"这是父组件信息"}},methods:{//定义子元素传递的信息处理函数handlerListen(value){this.message=value
}},components:{son:{template:`
<div>
<span>子组件信息</span>
<span>父组件传递的信息:{{name}}{{sex}}</span>
<button @click="submitFather">提交到父组件</button>
</div>
`,// props: ['name', 'sex', 'phone'], // 声明组件可接收的属性名称，下面代码简写形式props:{//这里可对父元素进行验证，是否是字符串，是否必填name:{type:String,required:true},sex:{type:String,required:true}},methods:{//当按钮点击时，定义向父元素传递消息的函数submitFather(){//向父元素发送消息this.$emit('listenSon',{name:"jack",age:20})}}}}})//实例化Vue，也就是将id=App这个节点挂载到Vue下const vm=newVue({el:'#app'})</script></body></html>
跨组件层级组件通信
- 转换为父子关系
- event-bus（事件总线）
- 借助 Vue 实例中的 $on() 与 $emit() 方法来实现：首先创建一个全局的 Vue 实例对象(bus)
- 在需要接收数据的组件中，利用 bus 来注册事件监听（绑定自定义事件）
- 在需要传递数据的组件中，利用 bus 来触发事件并传递数据
- vuex
- 示例：当我们点击位于孙元素提交按钮时，父元素的回调函数
this.$bus.$on("transmit",val=>{ console.log(val)}) }打印出来自孙元素传递的信息结果{name: ‘jack’, age: 20}
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divid="app"><father></father></div><scriptsrc="../libs/vue.js"></script><script>// const eventBus=new Vue()//注释内容等同于下面这种都是注册事件总线busVue.prototype.$bus=newVue()
Vue.component('father',{template:`
<div>
<div>这是父组件内容：{{message}}</div>
<son></son>
</div>
`,data(){return{message:"这是父组件信息"}},methods:{transmitFatherHandle(val){
console.log(val)}},created(){// eventBus.$on("transmit",this.transmitFatherHandle)//接受孙元素发过来的消息，两个参数（事件名，回调函数）this.$bus.$on("transmit",val=>{
console.log(val)})},components:{son:{template:`
<div>
<span>子组件信息</span>
<grandson></grandson>
</div>
`,components:{grandson:{template:`
<div>
<div>孙子组件信息</div>
<button @click="transmitHandle">提交到父元素</button>
</div>
`,methods:{transmitHandle(){// eventBus.$emit("transmit",{name:'jack',age:20})//发送给父元素信息，两个参数（事件名，传递的值）this.$bus.$emit("transmit",{name:'jack',age:20})}}}}}}})const vm=newVue({el:'#app',})</script></body></html>
本文转载自: https://blog.csdn.net/weixin_64925940/article/details/124734492
版权归原作者 鹏程933 所有， 如有侵权，请联系我们删除。
版权归原作者 鹏程933 所有， 如有侵权，请联系我们删除。