- props 和 $emit
props
: 用于父组件传递data数据给子组件,比如在index.vue
中,data函数里面有个list
数据,把它传给List
组件(下图1),在List
组件内用list属性来接收(下图2)
$emit
:事件触发,在index.vue
中在两个子组件内传入了两个方法:add delete。
这俩方法作为 父组件给子组件的 两个事件。
在Input组件中,通过点击事件:
点击事件来触发this.$emit('add')
,这里的add和父组件传给子组件的方法@add
一样。
同理,在List
组件中的delete
删除事件也是一样。在子组件List
中点击按钮,就会执行删除事件。
父到子,传递数据;子到父,触发事件。
- ❗自定义事件(兄弟组件通信)
import event from './event'
要实现Input.vue
和List.vue
之间通信:在input输入内容之后点击add按钮会在控制台打印出'on add title'。打印的方法在List.vue中