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）父訪問子