Vue学习-父子组件访问

最新推荐文章于 2021-06-12 00:12:13 发布

原创最新推荐文章于 2021-06-12 00:12:13 发布 · 320 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

父子组件访问

1.父访问子

$children

$refs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn ref="reference"></cpn>
    <button @click="btnClick">按钮</button>
  </div>
  <template id="cpn">
    <div>
      <h1>子组件</h1>
    </div>
  </template>
  <script src="../js/vue.js">
  </script>
  <script>
     const app = new Vue({
        el: '#app',
        data: {
          message: 'hello'
        },
        methods: {
          btnClick(){
          // 1.$children
          //  this.$children[0].showMessage();
          
          // $refs
          console.log(this.$refs.reference.name);
          }

        },
        components: {
          cpn: {
            template : '#cpn',
            data() {
              return {
                name: 'a',
              }
            },
            methods: {
              showMessage(){
                console.log('showMessage');
              }
            },
          },
        }
     })
  </script>
</body>
</html>

2.子访问父

$parent

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <cpn></cpn>
    
  </div>
  <template id="cpn">
    <div>
      <h1>子组件</h1>
      <ccpn></ccpn>
    </div>
  </template>
  <template id="ccpn">
    <div>
      <h1>cpn子组件</h1>
      <button @click="btnClick">按钮</button>

    </div>
  </template>
  <script src="../js/vue.js">
  </script>
  <script>
     const app = new Vue({
        el: '#app',
        data: {
          message: 'hello'
        },
        methods: {
         
        },
        components: {
          cpn: {
            template : '#cpn',
            data() {
              return {
                name: 'a',
              }
            },
            methods: {
              
            },
            components: {
              ccpn: {
                template : '#ccpn',
                data() {
                  return {
                    
                  }
                },
                methods: {
                  btnClick(){
                  // 子访问父：$parent
                  console.log(this.$parent.name);
                  // 访问根组件: $root
                  console.log(this.$root.message);
                },
              }
            }

            },
          },
        }
     })
  </script>
</body>
</html>