Vue.js 组件数据交互
1.前言
- 本节讲述组件之间如何进行数据交互
2.props属性与非 prop 的属性
父组件通过属性绑定的形式传值给子组件，这种传值分2种
| 类别 | 含义 | 说明 |
|---|---|---|
| props | 子组件本身已经通过props定义过，有明确的用途 | 传递的数据如何渲染取决于代码编写 |
| 非 prop | 未经过props定义，无法预知其用途 | 直接渲染到根标签中 |
3.props传递与接收
- 在父组件中把要传递的数据通过属性的形式绑定到子组件标签上，属性名不却分大小写，支持驼峰法命名
<child-component :title="title" :list="list"></child-component>
- 子组件通过props字段进行定义接收（数据类型和默认值）
var childComponent = {
data(){
return {}
},
props:{
title:{
//数据类型包括： String,Number,Array,Object,Boolean等
type:String,
default:""
},
list:{
type:Array,
//默认值是数字或者对象，需要定义function进行返回
default:function(){
return []
}
}
}
}
- 对于布尔值，传递属性却没有值的情况，相当于传入了true
<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post is-published></blog-post>
- 单项数据流：父组件数据发生改变，会触发子组件视图更新,而反过来就不会（引用数据类型除外）
4.自定义事件
- 子组件可以在适当的时机调用$emit()方法抛出一个事件给父组件
- 自定义事件的名称必须一致，区分大小写，不支持驼峰法命名
this.$emit('eventName',参数)
- 父组件在子组件标签中定义相关的事件回调,依次来响应子组件抛出的事件，还可以通过$on()方法来监听子组件事件
//标签语法
<child @eventName="showMsg"></Child>
//js语法
<child ref="child"></Child>
//通过ref标识找到子组件，并为其添加子定义事件
this.$refs.child.$on('eventName',this.showMsg)
5.sync 修饰符
- props属性是单向数据流，如果需要做双向数据绑定，除了可以使用v-model指令，还可以使用sync修饰符
- sync修饰符和v-model修饰符本质上都是通过自定义事件同步修改了父组件的值，相当于省略了父组件定义自定义事件回调的部分
- v-model通过model字段来定义事件名称，而sync 修饰符的事件名称的格式是固定的，即：update:prop属性名
- 实例：定义一个支持sync 修饰符的组件（关键在于合适的时机触发update:xxx事件）
var textDocument = {
template:"<input type='text' :value='value' @input='onInput'></input>",
data(){
return {
}
},
props:{
value:{
type:String,
default:""
}
},
methods:{
onInput(e){
//当前输入框的值
console.log(e.target.value)
//触发自定义事件
this.$emit('update:value',e.target.value)
}
}
}
6.直接访问父/子组件
- 父组件通过this.$refs.xxx来访问子组件，前提是在子组件标签中使用ref属性进行声明
//子组件标签中使用ref属性进行声明
<Child ref="child" />
//访问子组件的数据
this.$refs.child.title
- 子组件通过this.$parent来访问父组件
this.$parent.sayHello()
7.传递HTML内容
- props只能传递数据给子组件，如果要传递html内容，要使用插槽，具体见Vue.js slot插槽
8.非 prop 的属性
- 父组件挂载非 prop 的属性到子组件标签中，且子组件只有一个根标签时，这个属性值会被合并到子组件根标签中(2.x/3.x都适用)
//子组件HTML模版
<template>
<div class="box">子组件</div>
</template>
//父组件传递 非 prop 的属性
<child class="text-center" data-index="1"></child>
//渲染结果
<div class="box text-center" data-index="1">子组件</div>
- 如果子组件有多个根标签(vue2.x不支持多个根标签)，默认这些非 prop 的属性不会挂载到子组件的标签中，他们被封装到$sttrs这个对象中，可以通过他将非 prop 的属性绑定到目标标签中
//子组件HTML模版
<template>
<div class="box" :class="$attrs.class">子组件根标签1</div>
<div class="box" :data-index="$attrs['data-index']">子组件根标签2</div>
</template>
//渲染结果
<div class="box text-center">子组件根标签1</div>
<div class="box" data-index="1">子组件根标签2</div>
9.依赖注入
- 可以把依赖注入看作一部分“大范围有效的 prop”，通过他可以让所有后代组件访问父组件的属性或者方案
//父组件进行声明
provide: function () {
return {
title: "感冒"
}
}
//后代组件进行接收
inject: ['title']
- 依赖注入所提供的 property 是非响应式的
