Vue.js 组件数据交互

1.前言

• 本节讲述组件之间如何进行数据交互

2.props属性与非 prop 的属性

父组件通过属性绑定的形式传值给子组件，这种传值分2种

3.props传递与接收

• 在父组件中把要传递的数据通过属性的形式绑定到子组件标签上

• 子组件通过props字段进行定义接收（数据类型和默认值）

var childComponent = {
    data(){
        return {}
    },
    props:{
        title:{
            //数据类型包括： String,Number,Array,Object,Boolean等
            type:String,
            default:""
        },
        list:{
           type:Array,
           //默认值是数字或者对象，需要定义function进行返回
           default:function(){
               return []
           }
        }
    }
}

• 单项数据流：父组件数据发生改变，会触发子组件视图更新,而反过来就不会（引用数据类型除外）

4.自定义事件

• 子组件可以在适当的时机调用$emit()方法抛出一个事件给父组件

this.$emit('eventName',参数)

• 父组件在子组件标签中定义相关的事件回调,依次来响应子组件抛出的事件，还可以通过$on()方法来监听子组件事件

//标签语法

//js语法


//通过ref标识找到子组件，并为其添加子定义事件
this.$refs.child.$on('eventName',this.showMsg)

5.直接访问父/子组件

• 父组件通过this.$refs.xxx来访问子组件，前提是在子组件标签中使用ref属性进行声明

//子组件标签中使用ref属性进行声明

//访问子组件的数据
this.$refs.child.title

• 子组件通过this.$parent来访问父组件

this.$parent.sayHello()

6.非 prop 的属性

• 父组件挂载非 prop 的属性到子组件标签中，且子组件只有一个根标签时，这个属性值会被合并到子组件根标签中(2.x/3.x都适用)

//子组件HTML模版

//父组件传递 非 prop 的属性

//渲染结果
子组件

• 如果子组件有多个根标签(vue2.x不支持多个根标签)，默认这些非 prop 的属性不会挂载到子组件的标签中，他们被封装到$sttrs这个对象中，可以通过他将非 prop 的属性绑定到目标标签中

//子组件HTML模版

//渲染结果
子组件根标签1
子组件根标签2