vue 中组件与组件之间通信的方式

Posted 2022-06-24 x-xwp

1. vue 中组件与组件之间通信的方式？

父 -> 子 prop

子 -> 父 子通过 $emit 触发一个自定义事件 。 父在调用这个子组件的时候，监听这个自定义事件即可

下面这两种能实现，但是很繁琐。我们有更好的方式叫做中央事件处理器或者vuex

兄 -> 弟 要通过父亲来操作

表兄 -> 表弟 要通过爷爷

还有一些非常非常特殊的使用方式，一般不推荐使用：

1. $root 能够获取到根组件的实例对象

2. $parent 获取父组件的实例对象

3. $children 获取子组件们的实例对象集合 []

4. $refs 获取具体某个子组件的实例或者具体某个html元素的真实dom。（这个东西在获取具体某个html元素的时候常用。。。）

4.1 首先需要标记。你想要获取的组件或者html元素，在他们身上定义一个 ref="xxx"

4.2 然后 this.$refs.xxx

如果 ref 标记的是普通html元素，那么到通过 $refs.xxx 得到的将是 这个 html元素的dom对象

如果 ref 标记的是一个子组件。那么 通过 $refs.xxx 得到的将是这个 子组件的 实例对象

 

//代码视例
<script>
      Vue.component("parent", 
        data() 
          return 
            name: "张小三"
          ;
        ,
        template: `
          <div class="parent">
            <h1 ref="box2">我是 parent ， 我的名字是  name </h1>
          </div>
        `,
        created() 
          console.log(this.$children);
        
      );


      let vm = new Vue(
        el: "#app",

        data: 
          name: "张三丰"
        ,

        template: `
          <div id="app" class="root">
            <button @click="fn1">获取h1的真实dom对象</button>
            <h1 ref="box">我是老祖宗，根组件，我的名字是  name </h1>
            <parent ref="box2" ></parent>
          </div>
        `,

        methods: 
          fn1() 
            // 该如何获取 当前这个组件的 h1 的dom对象
            1.
            console.log(document.getElementById("box")); // 不推荐使用，有副作用
            2.
            console.log(this.$el.querySelector("#box")); // 可以使用，不会有副作用
            // 3. 最推荐的方式
            console.log(this.$refs["box"]);
            console.log(this.$refs.box2);
            // ? 需要获取到 parent 组件中 h1 标签的那个dom对象
            console.log(this.$refs["box2"].$el.querySelector("h1"));
            console.log(this.$refs["box2"].$refs["box2"]);
          
        
      );
    </script>