Vue.js 组件数据交互

本文主要是介绍Vue.js 组件数据交互，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.前言

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

2.props属性与非 prop 的属性

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

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 []
           }
        }
    }
}

• 单项数据流：父组件数据发生改变，会触发子组件视图更新

这篇关于Vue.js 组件数据交互的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！