关于javascript:Vue组件3-父访问子

24次阅读

共计 526 个字符，预计需要花费 2 分钟才能阅读完成。

父组件拜访子组件：应用 $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>

正文完