Vue组件父访问子

Posted 2021-09-07 HUMILITY

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue组件父访问子相关的知识，希望对你有一定的参考价值。

父子访问 children $refs

父组件访问子组件：使用$children或$refs reference（引用）

<body>
  <div id="app">
      <cpn></cpn>
      <cpn></cpn>
      <cpn ref="aaa"></cpn>
      <button @click="btnClick">按钮</button>
  </div>
<template id="cpn">
  <div>
      我是子组件
  </div>
</template>
<script>
  var app = new Vue({
      el: \'#app\',
      methods: {
          btnClick() {
              console.log(this.$children)
              this.$children[0].showMessage() //拿到子组件，调用子组件方法
              console.log(this.$refs.aaa.name)//对象类型，默认是一个空的对象，需要在组件加上 ref=""
          }
      },
      components: {
          cpn: {
              template: \'#cpn\',
              data() {
                  return {
                      name: \'我是子组件的name\'
                  }
              },
              methods: {
                  showMessage() {
                      console.log(\'showMessage\')
                  }
              }
          }
      }
  })
</script>

以上是关于Vue组件父访问子的主要内容，如果未能解决你的问题，请参考以下文章

Vue组件父访问子

从 Viewpager2 片段访问父片段函数

Vue组件 父访问子

父子访问 children $refs

Vue组件父访问子