一.子组件向父组件传递数据
方法:子组件绑定子组件的自定义事件,但事件处理函数绑定父组件的方法
1.<child @change="parent-method" @click="add"></child>
2.在子组件内部调用自定义事件
methods:{
add(){
this.$emit("parent-method",5) //这个5是参数,向事件处理函数传递
}
}
3.然后父组件的事件处理函数 就会调用,可以操作自身数据和接收传过来的数据
methods:{
parent-method(参数){ //接收传递过来的参数
console.log(arguments)// 不写在上面,一般在参数列表的arguments[0]
}
}
二.非父子之间的通信
1.方法:利用Vue的第三方实例在两个组件中传递数据
var vm=new Vue(); //第三方实例
2.现在接收方的声明周期的钩子函数中注册事件
var zujian1={
created(){
vm.$on("事件名",(参数)=>{ //接收的参数,arguments[0],可以传对象
//这个事件处理函数要写箭头函数,这样this才能指向zujian1的Vue实例
})
}
}
3.发送方触发事件并传递参数
var zujian2={
methods:{
vm.$emit("事件名",参数);
}
}
三.子组件中的事件分发
一般来说,子组件在页面标签中是不能写内容的
如:
<child>sdfdshfdsaf</child>
这里面的内容会被模板替换掉,写了没什么作用,但是我们可以用slot(插槽)来在里面写东西传到模板中去
如:
var child={
template:`
<slot name="head"></slot>
<slot>默认</slot> //这样用标签中写了的内容会放入
`,
}
标签:
<child>
<div slot="head"></div> //会替换<slot name="head"></slot>
内容 //会放入<slot></slot>
</child>