子传父，父传子案例

案例一：点击前后的效果图

body:

<div id="app">
   <my-father></my-father>
</div>

js:

<script>
Vue.component('my-father',{
    template:
    `
        <div>
            <h1>我是父组件</h1>
            <p>子组件添加的值在这里{{mes}}</p>
            <my-child @send='sent'></my-child>
        </div>
    `,
    data:function(){
        return{
            mes:''
        }
    },
    methods:{
        sent:function(text){
            this.mes=text
        }
    }
})

Vue.component('my-child',{
    template:
    `
        <div>
            <input type='text' v-model='message'>
            <button @click='add'>添加</button>
        </div>
    `,
    data:function(){
        return{
            message:''
        }
    },
    methods:{
        add:function(){
            this.$emit('send',this.message)
        }
    }
})

new Vue({
    el:'#app'
})
</script>

案例二：点击前后效果图

body:

<div id="app">
    <my-father></my-father>
</div>

js:

<script>
Vue.component('my-father',{
    template:`
        <div>
            <p>我是父组件</p>
            <my-child v-bind:number='mes' @send='jssend'></my-child>
            <b>{{text}}</b>
        </div>
    `,
    data:function(){
        return{
            mes:'123',
            text:''
        }
    },
    methods:{
        jssend:function(txt){
            this.text=txt
        }
    }
})

Vue.component('my-child',{
    props:['number'],
    template:`
        <div>
            <p>{{number}}</p>
            <button @click='add'>点击</button>
        </div>
    `,
    data:function(){
        return{
            num:1
        }
    },
    methods:{
        add:function(){
            this.$emit('send',this.num)
        }
    }
})

new Vue({
    el:'#app'
})
</script>

子传父，父传子案例

推荐阅读更多精彩内容