父子组件之间的访问

父访问子$children $refs

• $children

cpn: {
          template: '#cpn',
          data(){
            return{
              name:'黄开然'
            }
          },
          methods: {
            showMessage() {
              console.log('showMessage')
            }
          }
        }
      }

如何在父组件中调用showMessage()？

<div id="app">
    <cpn></cpn>
    <button @click="btnClick">button</button>
</div>
  
var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        btnClick() {
          console.log(this.$children)
          for(let c of this.$children){
            console.log(c.name)
            c.showMessage()
          }
        }
      }

• refs

默认是个空的对象

一个类似id的标识
使用：

<cpn ref="aaa"></cpn>
methods: {
        btnClick() {
          console.log(this.$refs.aaa.name)
        }
      },

子访问父 $parent $root

不常用