vue中子组件访问父组件中的数据方法，使用$parent或者$root

easyboot

于 2021-06-12 11:17:44 发布

阅读量329

点赞数

CC 4.0 BY-SA版权

分类专栏： # Vue.js

本文链接：https://blog.youkuaiyun.com/easyboot/article/details/117841987

Vue.js 专栏收录该内容

20 篇文章

订阅专栏

这篇博客探讨了Vue.js中的父子组件通信。通过实例展示了如何使用`$parent`和`$root`属性来访问父组件和根实例，并在子组件中定义方法响应点击事件。内容包括组件模板定义、数据传递以及事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@{
    ViewData["Title"] = "parent";
}
<h1>@ViewData["Title"]</h1>


<div id="app">
    <cpn ref="cpnref"> </cpn>
</div>

<template id="cpn">
    <div>
       <h2>我是子組件</h2>

        <button v-on:click="subcmpclick">子組件按鈕</button>
    </div>
    
</template>



<script src="~/js/vue.js"></script>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'test',
        },
        components: {
            cpn: {
                template: '#cpn',
                data() {
                    return { message: '子組件的數據信息傳遞' }
                },
                methods: {
                    subcmpclick() {
                        console.log('$parent',this.$parent)
                        console.log('$root',this.$root)
                    }
                }
            }
        }, 
    }) 
</script>