Javascript

Vue.js 组件数据交互

本文主要是介绍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 []
           }
        }
    }
}
  • 单项数据流:父组件数据发生改变,会触发子组件视图更新
这篇关于Vue.js 组件数据交互的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!