Vue 组件（二）父组件与子组件传递数据 之props

根据Vue.js官方文档：组件实例的作用域是孤立的，也就是说组件与组件之间即使与同名属性，值也不共享。这意味着不能再子组件的模板内直接引用父组件的数据。父组件的数据需要通过props才能下发到子组件中。

什么是父组件什么是子组件？如果组件A在它的模板中使用了组件B，那么组件A就是组件B的父组件，组件B就是A组件的子组件。

Vue.component('my-button', {

    tempalte: '<button>一个按钮</button>'

})

var app3 = new Vue({

    el: '#app3',

    data: {

        message: 0

    }

})

 

<div id="app3">

    <mybutton></mybutton>

</div>

 

<div id=”app3”></div> 是父组件

<button>一个按钮</button> 是子组件

如果app3要传数据给button，需要给在子组件button中用prop显式地声明它期待的数据。

js

Vue.component('my-button', {

    props: ['deliver'],

    tempalte: '<button>{{deliver}}</button>'

})

var app3 = new Vue({

    el: '#app3',

    data: {

        message: '把我传给子组件'

    }

})

 

HTML

<div id="app3">

    <my-button v-bind:deliver="message"></my-button>

</div>

 

上面代码中，我们用v-bind动态地将prop绑定到父组件的数据，因此每当父组件数据变化时，该变化也会传递给子组件。

#单向数据流

Prop是单向绑定的，也就是说不能在子组件中改变prop。那么如果在子组件中想要修改prop的数据：

1、 prop作为初始值传入后，子组件想把他作为局部数据来使用

2、 prop作为初始值传入，由子组件处理成其他数据输出

对于上面的两种情况采用的方式是：

1、 定义一个局部变量，并用prop的值初始化它

props: ['initialCounter'],

data: function () {

    return { counter: this.initialCounter }

}

 

2、定义一个计算属性，处理prop的值并返回

props: ['size'],

    computed: {

    normalizedSize: function () {

        return this.size.trim().toLowerCase()

    }

}

 

 

#prop验证  （官方文档）

可以为组件的prop指定验证规则，如果传入的数据不符合要求，Vue会发出警告。

要指定验证规则，需用对象的形式定义prop，不能用字符串数组。

Vue.component('example', {

    props: {

        // 基础类型检测 (`null` 指允许任何类型)

        propA: Number,

        // 可能是多种类型

        propB: [String, Number],

        // 必传且是字符串

        propC: {

            type: String,

            required: true

        },

        // 数值且有默认值

        propD: {

            type: Number,

            default: 100

        },

        // 数组/对象的默认值应当由一个工厂函数返回

        propE: {

            type: Object,

            default: function () {

                return { message: 'hello' }

            }

        },

        // 自定义验证函数

        propF: {

            validator: function (value) {

                return value > 10

            }

        }

    }

})