Vue组件（3）父访问子

时间 2021-06-20

标签 app this code component 对象 console cli 引用方法繁體版

原文原文链接

父子访问 children $refs

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

<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组件（3） 父访问子

父子访问 children $refs

Vue组件（3）父访问子