Vue学习-父子组件访问

最新推荐文章于 2024-01-18 10:50:58 发布

orangecloudy

最新推荐文章于 2024-01-18 10:50:58 发布

阅读量196

点赞数

本文链接：https://blog.csdn.net/orangecloudy/article/details/107426323

版权

父子组件访问

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>

orangecloudy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue学习-父子组件访问

父子组件访问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>&l
复制链接

扫一扫