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

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>

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

猜你喜欢