vue组件学习2

一.子组件向父组件传递数据

方法：子组件绑定子组件的自定义事件，但事件处理函数绑定父组件的方法

1.

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("事件名"，参数)；

}

}

---

三.子组件中的事件分发

一般来说，子组件在页面标签中是不能写内容的

如：

sdfdshfdsaf

这里面的内容会被模板替换掉，写了没什么作用，但是我们可以用slot（插槽）来在里面写东西传到模板中去

如：

var child={

   template:`

默认  //这样用标签中写了的内容会放入

`,

}

标签：

  //会替换

内容     //会放入