一 Prop 向子组件传递数据,$emit监听子组件事件
//子组件
Vue.component('Child', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
//父组件调用
<Child title="My journey with Vue"></Child>
//子组件
<button v-on:click="$emit('enlarge-text')">
Enlarge text
</button>
//父组件调用
<Child
...
v-on:enlarge-text="postFontSize += 0.1"
></Child>
二 插槽 prop 将插槽转换为可复用的模板,通过prop进行传值
//子组件
<ul>
<li
v-for="todo in filteredTodos"
v-bind:key="todo.id"
>
<!--我们为每个 todo 准备了一个插槽, 将 `todo` 对象作为一个插槽的 prop 传入。 -->
<slot name="todo" v-bind:todo="todo">
<!-- 后备内容 -->
{{ todo.text }}
</slot>
</li>
</ul>
//父组件
<todo-list v-bind:todos="todos">
<template v-slot:todo="{ todo }">
{{ todo.text }}
</template>
</todo-list>
三 $parent $refs
- $refs
通过 ref 这个 attribute 为子组件赋予一个 ID 引用
//子组件
<base-input ref="usernameInput"></base-input>
父组件通过this.$refs.usernameInput
获取到 DOM 元素和子组件实例
- $parent
$parent property 可以用来从一个子组件访问父组件的实例。它提供了一种机会,可以在后期随时触达父级组件,以替代将数据以 prop 的方式传入子组件的方式
四 依赖注入
provide 选项允许父组件指定想要提供给后代组件的数据/方法
//父组件
provide: function () {
return {
getMap: this.getMap
}
}
在任何后代组件里,都可以使用 inject 选项来接收指定的想要添加在这个实例上的 property
//子组件
inject: ['getMap']
五 vuex
版权声明:本文为qq_36145755原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。