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'
                }
            }
        },
        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'
})

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

阅读更多
文章标签: vue component props
个人分类: vue
想对作者说点什么? 我来说一句

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

关闭
关闭
关闭