父子组件的访问方式（$chidlren、$ref、$parenr、$root）

最新推荐文章于 2024-07-05 09:04:25 发布

Doe

最新推荐文章于 2024-07-05 09:04:25 发布

阅读量809

点赞数 1

分类专栏： # Vue 文章标签： vue.js refs

本文链接：https://blog.csdn.net/weixin_43613849/article/details/117933855

版权

Vue 专栏收录该内容

48 篇文章 3 订阅

订阅专栏

1、父组件访问子组件

1、$chidlren（用的少）

我们先来看下$children的访问

this.$children是一个数组类型，它包含所有子组件对象。

我们这里通过一个遍历，取出所有子组件的message状态。

在父组件中的btnClick中访问子组件：

btnClick() {
          //1.$children
          console.log(this.$children);
          for (let c of this.$children) {
            console.log(c.name);
            c.showMessage();
          }
        }
      }

访问父组件的第一个子组件：

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

完整代码如下：

  <div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn ></cpn>
    <cpn ></cpn>
    <button @click="btnClick">按钮</button>
  </div>

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

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

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello'
      },
      methods: {
        btnClick() {
          //1.$children
          console.log(this.$children);
          for (let c of this.$children) {
            console.log(c.name);
            c.showMessage();
          }
        }
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              name: '我是子组件的name'
            }
          },
          methods: {
            showMessage() {
              console.log('showMessage');
            }
          }
        }
      }
    })
  </script>

2、$refs（用的多）

$children的缺陷：

通过$children访问子组件时，是一个数组类型，访问其中的子组件必须通过索引值。

但是当子组件过多，我们需要拿到其中一个时，往往不能确定它的索引值，甚至还可能会发生变化。

有时候，我们想明确获取其中一个特定的组件，这个时候就可以使用$refs

$refs的使用：

1、$refs和ref指令通常是一起使用的。

2、首先，我们通过ref给某一个子组件绑定一个特定的ID。

3、其次，通过this.$refs.ID就可以访问到该组件了。

完整代码：

  <div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn ref="aaa"></cpn>
    <cpn ref="bbb"></cpn>
    <button @click="btnClick">按钮</button>
  </div>

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

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

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello'
      },
      methods: {
        btnClick() {
          //2.$refs  .>对象类型，默认是一个空的对象 比如我们再组件中加上ref=”xxx“
          console.log(this.$refs);
          console.log(this.$refs.aaa);
        }
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              name: '我是子组件的name'
            }
          },
          methods: {
            showMessage() {
              console.log('showMessage');
            }
          }
        }
      }
    })
  </script>

2、子组件访问父组件

1、$parent（用的少）

如果我们想在子组件中直接访问父组件，可以通过$parent

注意事项：

尽管在Vue开发中，我们允许通过$parent来访问父组件，但是在真实开发中尽量不要这样做。

子组件应该尽量避免直接访问父组件的数据，因为这样耦合度太高了。

如果我们将子组件放在另外一个组件之内，很可能该父组件没有对应的属性，往往会引起问题。

另外，更不好做的是通过$parent直接修改父组件的状态，那么父组件中的状态将变得飘忽不定，很不利于我的调试和维护。

完整代码

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

  <template id="cpn">
    <div>
      <div>我是cpn组件</div>
      <ccpn></ccpn>
    </div>
  </template>

  <template id="ccpn">
    <div>
      <div>我是子子组件</div>
      <button @click="btnClick">按钮</button>
    </div>
  </template>

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

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello'
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              name: '我是cpn的组件name'
            }
          },
          components: {
            ccpn: {
              template: "#ccpn",
              methods: {
                btnClick() {
                  //1、访问父组件 $parent
                  console.log(this.$parent);
                  console.log(this.$parent.name);
                  console.log(this.$parent.$parent.message);
                },
              }
            }
          }
        }
      }
    })
  </script>

</body>

2、$root

.访问根组件 $root
this.$root.根组件属性

完整代码：

  <template id="ccpn">
    <div>
      <div>我是子子组件</div>
      <button @click="btnClick">按钮</button>
    </div>
  </template>

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

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello'
      },
      components: {
        cpn: {
          template: '#cpn',
          data() {
            return {
              name: '我是cpn的组件name'
            }
          },
          components: {
            ccpn: {
              template: "#ccpn",
              methods: {
                btnClick() {
                  //2.访问根组件 $root
                  console.log('-----------');
                  console.log(this.$root.message);
                },
              }
            }
          }
        }
      }
    })
  </script>

参考链接：

https://www.bilibili.com/video/BV1H7411j7Mc?from=search&seid=10645859101733219162

Doe

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
父子组件的访问方式（$chidlren、$ref、$parenr、$root）

1、父组件访问子组件1、$chidlren（用的少）我们先来看下$children的访问this.$children是一个数组类型，它包含所有子组件对象。我们这里通过一个遍历，取出所有子组件的message状态。在父组件中的btnClick中访问子组件：btnClick() { //1.$children console.log(this.$children); for (let c of this.$childre
复制链接

扫一扫

专栏目录