25vue学习_子组件访问父组件$parent,$root

最新推荐文章于 2023-02-06 15:43:51 发布

chencaw

最新推荐文章于 2023-02-06 15:43:51 发布

阅读量175

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/chencaw/article/details/113745479

版权

VUE 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

1子组件访问父组件,$parent使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <!-- 父组件模板 -->
    <div id ="app">
        <cpn></cpn>   
    </div>
    <!-- 子组件模板 -->
    <template id="cpn1">
        <div>
           <h2>我是cpn组件</h2>
           <ccpn></ccpn>
        </div>            
    </template>
    <template id="ccpn">
        <div>
           <h2>我是子组件</h2>
           <button @click="btnClick">按钮</button>
        </div>            
    </template>
    <script src="../js/vue.js"></script>
    <script>
      
        //1、2父组件中直接创建子组件--root组件
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message: '你好啊'
            },
            components:{
                cpn:{
                    template: '#cpn1',
                    data(){
                        return{
                            name: '我是cpn组件的name'
                        }
                    },
                    components:{
                        ccpn:{
                            template: '#ccpn',
                            methods:{
                                btnClick(){
                                    //1.访问父组件$parent
                                    console.log(this.$parent);
                                    console.log(this.$parent.name);
                                }
                            }
                        }
                    }                    
                }
            }     
        })
    </script>
</body>

2子组件访问根组件,$root使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <!-- 父组件模板 -->
    <div id ="app">
        <cpn></cpn>   
    </div>
    <!-- 子组件模板 -->
    <template id="cpn1">
        <div>
           <h2>我是cpn组件</h2>
           <ccpn></ccpn>
        </div>            
    </template>
    <template id="ccpn">
        <div>
           <h2>我是子组件</h2>
           <button @click="btnClick">按钮</button>
        </div>            
    </template>
    <script src="../js/vue.js"></script>
    <script>
      
        //1、2父组件中直接创建子组件--root组件
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message: '你好啊'
            },
            components:{
                cpn:{
                    template: '#cpn1',
                    data(){
                        return{
                            name: '我是cpn组件的name'
                        }
                    },
                    components:{
                        ccpn:{
                            template: '#ccpn',
                            methods:{
                                btnClick(){
                                    // //1.访问父组件$parent
                                    // console.log(this.$parent);
                                    // console.log(this.$parent.name);

                                    //访问根组件$root
                                    console.log(this.$root);
                                    console.log(this.$root.message);
                                }
                            }
                        }
                    }                    
                }
            }     
        })
    </script>
</body>

chencaw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
25vue学习_子组件访问父组件$parent,$root

1子组件访问父组件,$parent使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title-hellovuejs</title></head><body>  <div id ="app"> <cpn&g
复制链接

扫一扫