Vue组件中的通信(parent,root,children,el)

最新推荐文章于 2024-07-22 11:34:18 发布

huxiaoxiao.

最新推荐文章于 2024-07-22 11:34:18 发布

阅读量870

点赞数 1

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121798310

版权

vue 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

父子组件的通信（通讯）（组件的通信是vue核心之一）组件是vue的核心，组件的通信是vue的核心的核心

通信：数据的“动态的实时的”传递

通信（访问）--- 一定是能拿到对方的东西（数据中心的数据，方法中心的方法，计算属性等等）

父子组件访问

子访问父 parent和root

父访问子 children和refs

父组件和子组件（父子之间数据访问）

父子组件数据互相访问

vue中 $parent 以及 ref 和 $refs

子实例（子组件）

$parent获取父组件实例

在子组件直接使用this.$parent

在子实例（子组件）拿到父实例（父组件）里的任何东西！！！

举例：

先创建两个组件，一个为child(代表子元素)，一个为parent(代表父元素)，在vm实例中注册parent组件：

let child = {
            template:`#child`,
        }
        let parent = {
            template:`#parent`,
        }

           // 根组件
        let vm = new Vue({
            el:'#app',
            components:{
                parent
            }
        })

在parent组件的 components 中注册child组件，让child组件成为parent的子组件

   let parent = {
            template:`#parent`,
            components:{
                child
            }
        }

在视图层使用组件

 <div id="app">
        <parent></parent>
    </div>
    <template id="child">
        <div>
            <h1>我是子组件child</h1>
        </div>
    </template>
    <template id="parent">
        <div>
            <h1>我是父组件parent</h1>
            <child></child>
        </div>
    </template>

在子组件的created生命周期中，获取父组件东西的方法

1.子组件中，获取父组件实例的方法 this.$parent

 let child = {
            template:`#child`,
            created(){
                console.log(this.$parent);
            }
        }

2. 获取父组件数据中心data中的数据

let parent = {
            template:`#parent`,
            data(){
                return {
                    mes:"我是父组件的数据mes",
                    title:"我是父组件的数据title"
                }
            }
    }

 created(){
                console.log(this.$parent.mes);
                console.log(this.$parent.title);
            }

3.获取父组件中计算属性computed中的数据

 let parent = {
            template:`#parent`,
            data(){
                return {
                    mes:"我是父组件的数据mes",
                    title:"我是父组件的数据title",
                    num:1
                }
            },
            computed:{
                number(){
                    return this.num*100
                } 
            },
            components:{
                child
            }
        }

 created(){
                console.log(this.$parent.number);
            }

4.获取父组件中方法中心的方法，直接调用就加上()号

 let parent = {
            template:`#parent`,
            methods:{
                change(){
                    document.body.style.backgroundColor="pink"
                }
            }
            components:{
                child
            }
        }

 created(){
                this.$parent.change()
            }

$root

获取根组件

$root获取根组件即 new出来的Vue实例

获取最外层根组件(main.js内的组件)

用法和$parent一样，在其他组件上面获取到 vm实例(即根组件)

例如：

this.$root.title

例如：

<body>
    
    <div id="app">
        <parent></parent>
    </div>

    <template id="child">
        <div>
            <h1>我是子组件child</h1>
        </div>
    </template>
    <template id="parent">
        <div>
            <h1>我是父组件parent</h1>
            <hr>
            <child></child>
        </div>
    </template>

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

        // 子组件访问根组件
        let child = {
            template:`#child`,
            // 生命周期钩子函数
            created(){
                // 子组件中，获取根组件实例的方法 this.$parent
                console.log(this.$root);
                // 获取根组件数据中心data中的数据
                console.log(this.$root.mes);
                console.log(this.$root.list);
                console.log(this.$root.title);
                // 获取根组件中计算属性computed中的数据
                console.log(this.$root.num);
                // 获取根组件中方法中心的方法，直接调用就加上()号
                this.$root.change();

                // 获取根组件的dom元素，包括他的子节点
                // $el是获取根节点的dom挂载元素
                console.log(this.$root.$el);
            }
        }

        let parent = {
            template:`#parent`,
            data(){
                return {
                   
                }
            },
            computed:{
                num(){
                    return this.number*10
                }
            },
            components:{
                child
            },
            methods:{
                change(){
                    document.body.style.backgroundColor = "pink";
                }
            }
        }

        let vm = new Vue({
            el:'#app',
            data:{
                mes:"我是根组件的数据mes",
                title:"我是根组件的数据title",
                list:[100,200,300,400,500],
                number:100
            },
            methods: {
                change(){
                    document.body.style.backgroundColor = "pink";
                }
            }, 
            computed:{
                num(){
                    return this.number*10
                }
            },
            components: {
                parent
            }
        })
    </script>
</body>

$el

$el是拿其dom

获取当前组件中的根元素dom(包括其子元素)

可以拿取到vm实例中的挂载点dom元素，所以只能拿取根节点上的

let parent = {
            template:`#parent`,
            created(){
                console.log(this.$root.$el);
            }
        }

父实例（父组件）

$children ($children 的值是数组)

$children 获取"全部的"子组件

获取当前组件的子组件,子组件会被放进数组[]里

获取子组件的下标后,操作和$parent一样

例如：

子组件的数组

this.$children

执行/获取第一个子组件的方法/属性值

this.$children[0].方法名/data属性名

mounted(){

console.log(this.$children[0].msg)

}

<body>
    
    <div id="app">
        <parent></parent>
    </div>
    <!-- 父组件parent视图层 -->
    <template id="parent">
        <div>
            <h1>我是父组件parent</h1>
            <!-- 使用组件 -->
            <child></child>
            <mylist></mylist>
        </div>
    </template>
    <!-- 子组件child视图层 -->
    <template id="child">
        <div>我是子组件child</div>
    </template>
    <!-- 子组件mylist视图层 -->
    <template id="mylist">
        <div>我是子组件mylist</div>
    </template>
    <script src="./js/vue.js"></script>
    <script>

        let child = {
            template:`#child`,
            data(){
                return {
                    title:'我是子组件child的title'
                }
            }
        }
        let mylist = {
            template:`#mylist`,
            data(){
                return {
                    title:'我是子组件mylist的title'
                }
            }
        }
        let parent = {
            template:`#parent`,
            components:{
                // 注册组件，让他俩成为parent的子组件
                child,
                mylist
            }
        }
        let vm = new Vue({
            el:'#app',
            // 注册parent组件
            components:{
                parent
            }
        })
    </script>

在父组件的 mounted 生命周期函数中获取子组件：

 mounted(){
                console.log(this.$children);
            }

得到的结果是一个数组，因为有两个子组件

访问其中一个子组件的data中的数据，通过下标

 mounted(){
                console.log(this.$children[0].title);
                console.log(this.$children[1].title);
            }

同理的，访问计算属性和方法中心都是通过下标去访问其中一个

huxiaoxiao.

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue组件中的通信(parent,root,children,el)

父子组件的通信（通讯）（组件的通信是vue核心之一）组件是vue的核心，组件的通信是vue的核心的核心通信：数据的“动态的实时的”传递通信（访问）--- 一定是能拿到对方的东西（数据中心的数据，方法中心的方法，计算属性等等）父子组件访问子访问父 parent和root父访问子 children和refs父组件和子组件（父子之间数据访问）父子组件数据互相访问vue中 $parent 以及 ref 和 $refs子实例（子组件） $pare...
复制链接

扫一扫