Vue组件-2

这次我们来看下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默认是单向绑定--当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改父组件的状态--这会让应用的数据流难以理解。不过，也可以使用绑定修饰符：

猜你喜欢