Miya

Vue-使用props传递数据
基本用法 组件不仅仅是要将模板的内容进行复用,更重要的是组件间进行的通信。传递数据的过程就是由 props 来实现...
扫描右侧二维码阅读全文
09
2017/04

Vue-使用props传递数据

基本用法

组件不仅仅是要将模板的内容进行复用,更重要的是组件间进行的通信。传递数据的过程就是由 props 来实现
在组件中,使用 props 来声明需要从父级接收的数据,props 的值可以是字符串数组,也可以是函数

<div id="app">
    <my-component message="来自父组件的数据"></my-component>
</div>

<script>
    Vue.component('my-component',{
        props: ['message'],
        template: '<div>{{ message }}</div>'
    });
    var app = new Vue({
        el: '#app'
    });
</script>

prop 声明数据与 data 声明数据的区别

不同点

prop 中声明的数据来自父级
data 中的组件是自己数据,作用域是组件本身

相同点

两种数据都可以在模板 template 以及计算属性 computed 和方法 methods 中使用

在组件的自定义标签Tag上直接写该props 的名称,如果要传递多个数据,在 props 数组中添加项即可

有时候传递的数据是来自父级的动态数据,而不是静态数据,因此可以使用v-bind指令来动态绑定 props 的值

单项数据流

在业务中经常会遇到两种需要改变 prop 的情况:

  1. 父组件传递初始值进来,子组件将其做为初始值保存,在自己的作用域下可以随意使用和修改
  2. prop 作为需要被转变的原始值传入

对于第一种情况,可以在组件的 data 内再声明一个数据,引用ref父组件的 prop:

<div id="app">
    <my-component :init-count="1"></my-component>
</div>
<script>
    Vue.component('my-component',{
        props: ['initCount'],
        template: '<div>{{ count }}</div>',
        data: function(){
            return{
                count: this.initCount
            }
        }
    });
    var app = new Vue({
        el: '#app'
    });
</script>

对于第二种情况,只需要使用计算属性即可

<div id="app">
    <my-component :width="100"></my-component>
</div>
<script>
    Vue.component('my-component',{
        props: ['width'],
        template: '<div :style="style">组件内容</div>',
        computed: {
            style: function(){
                return{
                    width: this.width + 'px'
                }
            }
        }
    });
    var app = new Vue({
        el: '#app'
    });
</script>

数据验证

prop 选项的值都是一个数组,除了数组外,也可以传入对象,当 prop 需要验证时,就需要使用对象写法
一般当组件需要多人协作使用时,推荐进行数据认证

Vue.component('my-component',{
    props: {
        // 必须是数字类型
        propA: Number,
        // 必须是数字或字符串类型
        propB: [String, Number],
        // Boolean 值,默认为 true
        propC: {
            type: Boolean,
            default: true
        }
    }
});
最后修改:2018 年 10 月 15 日 02 : 12 AM

コメントする