vue父子组件互相访问11

父子组件互相访问

父组件访问子组件：

$children ：
this.$children是一个类型，获得所有的子组件。
缺点：访问某个子组件时只能通过索引值去访问。
$refs ：
this.$refs与ref配对使用，给子组件的ref赋一个特定的refID，再通过this.$refs.refID去访问特定的子组件。

子组件访问父组件

$parent:：
子组件可以通过this.$parent直接访问父组件，但实际开发中一般不会在子组件中通过调用this.$parent去访问父组件。实际开发中子组件应该尽量避免去访问父组件，以降低父子组件的耦合度，免于开发人员的调试和维护。

在这里插入图片描述
效果

在info中分别调用children、ref+refs打印输出子组件
在这里插入图片描述
在child1组件中调用parent打印父组件info、调用children打印子组件child2

在child2组件中通过调用parent打印父组件child1、调用parent.父组件属性名打印父组件的属性值、调用root打印根组件

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>9父子组件互相访问</title>
</head>
<body>
  <div id="info">
<!--    我是父组件（根组件）-->
    <h3>我是父组件（根组件）</h3>
    <button @click="printchildren">打印我的子组件</button>
    <button @click="printpchild1">通过children打印第一个子组件</button>
    <button @click="printpchild3">通过ref打印子组件child3</button>
<!--  子组件-->
    <child1></child1>
    <child3 ref="pchild3"></child3>
  </div>

  <template id="child1">
    <div>
      <h3>我是vue实例的子组件child1</h3>
      <button @click="printfather">打印我的父组件info</button>
      <button @click="printchild2">打印我的子组件child2</button>
<!--      子组件-->
      <child2></child2>
    </div>
  </template>

  <template id="child3">
    <div>
      <h3>我是vue实例的第二个子组件child3</h3>
    </div>
  </template>

  <template id="child2">
    <div>
      <h3>我是child1组件的子组件child2</h3>
      <button @click="printchild1">打印我的父组件child1</button>
      <button @click="printparentpro">打印父组件child1的name、age属性</button>
      <button @click="printroot">打印根组件</button>
    </div>
  </template>
  <script src="../../js/vue.js"></script>
  <script>
    // 子组件child2
    const child2 = {
     
     
      template: `#child2`,
      methods: {
     
     
        printchild1(){
     
     
          console.log("打印我的父组件child1");
          console.log(this.$parent);
          console.log("----------分割线---------------")
        },
        printparentpro(){
     
     
          console.log("child2父组件child1的name");
          console.log(this.$parent.name);
          console.log("child2父组件child1的age")
          console.log(this.$parent.age);
          console.log("----------分割线---------------")
        },
        printroot(){
     
     
          console.log("打印根组件");
          console.log(this.$root);
          console.log("----------分割线---------------")
        }
      }
    }

  // 子组件child1
    const child1 = {
     
     
      template: `#child1`,
      data(){
     
     
        return {
     
     
          name: "my name is child1",
          age: "my age is 3-year-old",
        }
      },
      methods: {
     
     
        printfather(){
     
     
          console.log("打印我的父组件info");
          console.log(this.$parent);
          console.log("----------分割线---------------")
        },
        printchild2(){
     
     
          console.log("打印我的子组件child2");
          console.log(this.$children);
          console.log("----------分割线---------------")
        }
      },
      components: {
     
     
        child2,
      }
    }

    // 子组件child3
    const child3 = {
     
     
      template: `#child3`,
    }

    // 把vue实例看作父组件
  const info = new Vue({
     
     
    el : "#info",
    components: {
     
     
      child1,
      child3
    },
    methods: {
     
     
      printchildren(){
     
     
        console.log("打印我的子组件");
        console.log(this.$children);
        console.log("----------分割线---------------");
      },
      printpchild1(){
     
     
        console.log("调用children打印我的子组件child1");
        console.log(this.$children[0]);
        console.log("----------分割线---------------");
      },
      printpchild3(){
     
     
        console.log("调用ref打印我的子组件child3");
        console.log(this.$refs.pchild3);
        console.log("----------分割线---------------");
      }
    }
  })
  </script>
</body>
</html>

vue父子组件互相访问11

父子组件互相访问

猜你喜欢