Vue父访问子-children-refs案例

一.html

     <!-- 父组件访问子组件:使用$children或$refs,当需要拿所有的时候用$children
  子组件访问父组件:使用$parent -->
  <div id="app">
    <cpn></cpn>
    <cpn ref="bbb"></cpn>
    <cpn ref="aaa"></cpn>
    <button @click ="btnClick">按钮</button>
  </div>
  <template id="cpn">
    <div>我是子组件</div>
  </template>

二.script

    const cpn ={
  template: '#cpn',
  methods: {
    showmessage(){
      console.log('showmessage');
    }
  },
  data () {
    return {
      name :"lsh"
    }
  }
}
const app =new Vue({
  el:"#app",
  methods: {
    btnClick(){
      // this.$children[0].showmessage()
      console.log(this.$refs.bbb.name);//refs ->对象类型，默认是一个空对象，要在主键上加 ref =''
    }
  },
  components: {
    cpn
  }
})