这次我们来看下Vue.js组件之间的三种数据传递方式:
- props
- 组件通信
- slot
下面我们分别对每一种数据传递方式做详细的阐述。
1.props
“props”是组件数据的一个字段,期望从父组件传下来数据。因为组件实例的作用域是孤立的,这意味着不能并且不应该在子组件的模板内直接引用父组件的数据,所以子组件需要显式地用props选项来获取父组件的数据。props选项可以是字面量,也可以是表达式,还可以绑定修饰符。下面我们详细看一下它是如何使用的。
(1)字面量语法
Vue.component('child',{ //声明props props:['msg'], //prop可以用在模板内 //可以用`this.msg`设置 template:'<span>{{msg}},DDFE</span>' })
(2)动态语法
类似于用v-bind将HTML特性绑定到一个表达式,我们也可以用v-bind将动态props绑定到父组件的数据。每当父组件的数据变化时,该变化也会传导给子组件(类似于AngularJS绑定策略中的@)。代码示例如下:
var Child = Vue.extend({ //声明props props:['didiProps'] , template:'<div>{{didiProps}}</div>' , replace:true }) var Parent = Vue.extend({ template:'<p>I am parent</p><br><child :didi-props="hello"></child>' , data:function(){ return {'hello':'hello'} } , components:{ //<child>只能用在父组件模板内 ‘child’:Child } })
//创建根实例
new Vue({
el:'#example',
components:{
'didi-props':Parent
}
})
(3)绑定修饰符
props默认是单向绑定--当父组件的属性变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意修改父组件的状态--这会让应用的数据流难以理解。不过,也可以使用绑定修饰符: