vue组件间通信

组件间通信有5种方式：props，自定义事件，订阅和发布，slot，vuex

props接收

父组件传方法或函数给子组件时的写法如下，：后面的是父组件传的属性名，‘’‘’里面时子组件接收的属性名，一般设置为相同

//父组件传一个方法属性
<todo-header :addTodo="addTodo"/>

子组件接收时有两种写法

//直接指定属性名
props: ['addTodo']

//指定属性名和属性值的类型为方法
  props: {
      addTodo: Function
    }

自定义事件

自定义事件分为绑定监听和触发，父组件绑定自定义事件，子组件触发，语法如下：

v:on 自定义名="函数名"//绑定
$emit('函数名',data)//监听

有两种自定义事件的写法
第一种：

//绑定addTodo监听事件
<todo-header @addTodo="addTodo"/>

    methods: {
      //添加方法
      addTodo (todo) {
        this.todos.unshift(todo)
      },

//触发自定义事件：addTodo
      this.$emit('addTodo', todo)

第二种：
通过ref属性绑定标签

<todo-header ref="header"/>

   mounted () {//执行异步代码
      //给<todoheader/>绑定addTodo事件监听
     this.$refs.header.$on('addTodo,this.addTodo')
    },

第一种适用于父子组件的数据传递，代替函数属性，当子组件下还有子组件时，使用第二种

消息订阅发布

使用pubsub库，可以实现兄弟组件间通信，例如搜索
安装导入pubsub-js

//发布
   PubSub.publish('id', msg)

//订阅
PubSub.subscribe('id', (msg) => {

slot

插槽，传的是标签体，当组件使用多次时使用slot占位

//父组件
<div slot=''></div>

//子组件
<slot name=''></slot>

VueX

(未完待续)