父子组件的访问方式：$children

最新推荐文章于 2022-05-05 17:56:07 发布

Jookerone

最新推荐文章于 2022-05-05 17:56:07 发布

阅读量216

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_45178972/article/details/111334108

版权

Vue 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

父组件访问子组件：使用$children（通过索引下标）（很少用）或 $refs（通过组件的ref属性，常用）

<!DOCTYPE html>
<html>

<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <div id="app">
    <cpn></cpn>
    <cpn></cpn>
    <cpn1 ref='cc'></cpn1>
    <button @click="showChildren">按钮</button>
  </div>
  <template id='cpn'>
    <div>
      {{message}}
    </div>
  </template>
  <script>
    const app = new Vue({
      el:"#app",
      data:{ 

      },
      methods:{ 
        showChildren(){
          console.log(this.$refs.cc.message);
          
        }  
      },
      components:{
        cpn:{
          template:'#cpn',
          data(){
            return{
              message:'我是子组件',
            }
          },
          methods:{
            showMessage(){
              console.log("showMessage")
            }
          },
        },
        cpn1:{
          template:'#cpn',
          data(){
            return{
              message:'我是子组件1',
            }
          },
          methods:{
            showMessage(){
              console.log("showMessage1")
            }
          },
        },
      }
    })
  </script>
</body>

</html>

子组件访问父组件: 使用$parent （很少用）
子组件访问根组件：this.$root（很少用）

Jookerone

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
父子组件的访问方式：$children

父组件访问子组件：使用$children（通过索引下标）（很少用）或 $refs（通过组件的ref属性，常用）<!DOCTYPE html><html><head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js">&.
复制链接

扫一扫

专栏目录