vue中组件通信之父子通信:props(组件传参)

实例一:

<div id="app">
    <alert msg="hhhhhhh"></alert>
</div>
Vue.component('alert', {
    template: '<button @click="on_click">点击</button>',
    props: ['msg'],
    methods: {
        on_click: function(){
            alert(this.msg);
        }
    }
})

new Vue({
    el: '#app'
})

实例二:

<div id="app">
    <user username="samve"></user>
</div>
Vue.component('user', {
    template: `
        <a :href="'user/' + username">{{username}}</a>
    `,
    props: ['username']
})

new Vue({
    el: '#app'
})

Prop 验证:

<div id="app">
    <my-component
        :num="100"
        :msg="'sdf'"
        :cust="8"
    ></my-component>
</div>
Vue.component('my-component', {
    props: {
        num: Number,
        propB: [String, Number],
        msg: {
            type: String,
            require: true
        },
        num1: {
            type: Number,
            default: 1000
        },
        object: {
            type: Object,
            default: function(){//对象必须以这种方式返回
                return {
                    message: 'hello'
                }
            }
        },
        list: function(){//对象必须以这种方式返回
            return ['第1项', '第2项', '第3项'];
        },
        cust: {
            validator: function(value){
                return value>10
            }
        }
    },
    template: `<div>
        <p>{{num}}</p>
        <p>{{msg}}</p>
        <p>{{num1}}</p>
        <p>{{object}}</p>
        <p>{{cust}}</p>
    </div>`
});

new Vue({
    el: '#app'
})

这里都是通过验证了的,能够全部输出来,而且控制台没有报错。
如果有不符合的,控制台会报错。

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页