Vue组件化(父子组件间的通信,插槽slot)

1 如何进行父子组件间的通信呢?
1.1通过props向子组件传递数据(父传子)
在子组件中,使用选项props来声明需要从父级接收到的数据。
props的值有两种方式:
方式一:字符串数组,数组中的字符串就是传递时的名称。
Vue组件化(父子组件间的通信,插槽slot)_第1张图片
方式二:对象,对象可以设置传递时的类型,也可以设置默认值等。
Vue组件化(父子组件间的通信,插槽slot)_第2张图片

1.2通过事件向父组件发送消息(子传父)
在子组件中,通过$emit()来触发事件。
在父组件中,通过v-on来监听子组件事件。

Vue组件化(父子组件间的通信,插槽slot)_第3张图片

1.3父子组件的访问
有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问跟组件。
1.3.1父组件访问子组件:使用$refs
r e f s 和 r e f 指 令 通 常 是 一 起 使 用 的 。 首 先 , 我 们 通 过 r e f 给 某 一 个 子 组 件 绑 定 一 个 特 定 的 I D 。 其 次 , 通 过 t h i s . refs和ref指令通常是一起使用的。 首先,我们通过ref给某一个子组件绑定一个特定的ID。 其次,通过this. refsref使refIDthis.refs.ID就可以访问到该组件了。
在这里插入图片描述
Vue组件化(父子组件间的通信,插槽slot)_第4张图片
1.3.2子组件访问父组件:使用$parent

2.1插槽
2.1.1在子组件中,使用特殊的元素就可以为子组件开启一个插槽。
该插槽插入什么内容取决于父组件如何使用。
Vue组件化(父子组件间的通信,插槽slot)_第5张图片
Vue组件化(父子组件间的通信,插槽slot)_第6张图片

2.1.2具名插槽
Vue组件化(父子组件间的通信,插槽slot)_第7张图片
Vue组件化(父子组件间的通信,插槽slot)_第8张图片

你可能感兴趣的:(Vue组件化(父子组件间的通信,插槽slot))