子组件访问父组件的方式 $parent

一、$parent的使用

        <div id="app">
            <cpn></cpn>
        </div>
        <template id="cpn">
            <div>
                <h2>子组件</h2>
                <button @click="btnClick">获取父组件对象</button>              
            </div>

        </template>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                data: {
                    name: 'father'
                },
                components: {
                    cpn: {
                        template: '#cpn',
                        methods: {
                            btnClick(){
                                console.log(this.$parent);
                            }
                        }
                    }
                }
            })
        </script>

image.png

获取父组件的name

image.png
image.png

二、注意事项

尽管在Vue开发中，我们允许通过$parent来访问父组件，但是在真实开发中尽量不要这样做。
子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了。
如果我们将子组件放在另外一个组件之内，很可能该父组件没有对应的属性，往往会引起问题。
另外，更不好做的是通过$parent直接修改父组件的状态，那么父组件中的状态将变得飘忽不定，很不利于我的调试和维护。