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 是非响应式的