父?jìng)髯?/h3>

父組件

    <div id="box">
        <aaa></aaa>//父組件
    </div>

    <template id="aaa">
      <div>
          <h1>11111</h1>
          <bbb :m="msg"></bbb>//子組件綁定父組件傳的值
      </div>
    </template>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    data(){
                        return {
                            msg:'我是父組件的數(shù)據(jù)'
                        }
                    },
                    template:'#aaa',
                    components:{
                        'bbb':{
                            props:['m'],//子組件通過props獲取綁定父組件的值
                            template:'<h3>我是bbb組件->{{m}}</h3>'
                        }
                    }
                }
            }
        });
    </script>

子傳父

    <div id="box">
        <aaa></aaa>
    </div>
    <template id="aaa">
      <div>
         <span>我是父級(jí) -> {{msg}}</span>
        <bbb @child-msg="get"></bbb>//綁定get方法
      </div>
    </template>
    <template id="bbb">
      <div>
        <h3>子組件-</h3>
        <input type="button" value="send" @click="send">//子組件綁定傳送方法
        </div>
    </template>
    <script>
        var vm=new Vue({
            el:'#box',
            data:{
                a:'aaa'
            },
            components:{
                'aaa':{
                    data(){
                        return {
                            msg:111,
                            msg2:'我是父組件的數(shù)據(jù)'
                        }
                    },
                    template:'#aaa',
                    methods:{
                        get(msg){
                            this.msg=msg;//將獲取到的值賦給自己的屬性中
                        }
                    },
                    components:{
                        'bbb':{
                            data(){
                                return {
                                    a:'我是子組件的數(shù)據(jù)'
                                }
                            },
                            template:'#bbb',
                            methods:{
                                send(){
                                    this.$emit('child-msg',this.a);//將值傳出
                                }
                            }
                        }
                    }
                }
            }
        });
    </script>

*注

如果子組件是用路由引入的，可以將綁定方法寫到路由中

<bbb @child-msg="get"></bbb>//綁定get方法
===>
<router-view @numNew="get" @aaa="getNoticeTheNumber" />