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

 

转载于:https://www.cnblogs.com/samve/p/9124678.html