vue组件传值

父给子传：

父组件：用“：”绑定，是v-bind的缩写

<template>
    <div>
        <List :deleteTodo="deleteTodo" :checkTodo="checkTodo" /> // 这里是父组件引用子组件List
    </div>
</template>

子组件：用“props”接收

export default {
  name: 'List',
  props: ['todos', 'deleteTodo', 'checkTodo']
}

---

子给父传：

父组件：用@符，是v-on的缩写，表示监视

<Footer @checkAlltodo="checkAlltodo" @clearAlltodo="clearAlltodo" />

子组件也是要先props接收，

export default {
  name: 'Footer',
  props: ['checkAlltodo', 'clearAlltodo'],
  methods: {
    clearAll() {
      this.$emit('clearAlltodo')  //用$emit('事件名'，值)触发
    },
  }
}

有时候，v-bind 和v-on 会有相同的效果。

---

爷孙传值：

全局事件总线：$bus.$on('事件名'，方法),用完了记得要销毁。

爷组件：

export default {		
    mounted() {
		this.$bus.$on('checkTodo',this.checkTodo)
		
	},
	beforeDestroy() {
		this.$bus.$off('checkTodo')
	    
    }
}

孙组件：

export default {			
    methods:{
        handleCheck(id){
        this.$bus.$emit('checkTodo',id)
	    }
    }
}

也可以代代相传，但是比较麻烦。