Vue初学20-父子组件间的引用-子组件引用父组件

父子间引用子组件用的比较多，子组件引用父组件用的相对较少。子组件引用父组件使用$parent。

如下所示，子组件中的按钮绑定点击事件，弹出显示父组件的title属性。

<div id="app">
        <mycpn></mycpn>
    </div>
    <script src="../js/vue.js"></script>
    <template id="cpn">
        <div>
            <h2>{{title}}</h2>
            <button @click="btnclick">子组件按钮</button>
        </div>
    </template>
    <script>

        //相当于vue的子组件
        const mycpn={
            template:'#cpn',
            data(){
                return {
                    title: '我是子组件'
                }
            },
            methods:{
                btnclick(){
                    //弹出显示父组件中的title
                    alert(this.$parent.title);
                }
            }
         }
        //创建并注册组件
        Vue.component('mycpn',mycpn);
        //vue相当于父组件
        const vue = new Vue({
            el:"#app",
            data:{
                title:"我是父组件"
            },
            components:{
                mycpn:mycpn
            }
        });
    </script>

效果如下：

如果嵌套了多层子组件，子组件可以用$root引用最外层的父组件，即根组件。