Vue-组件之间的v-ref和parent访问(十一)

1.父组件访问子组件，跟当初dom元素document.querySelector（"元素节点名"）dom元素获取是同个意思

父组件
a.ref="名字子组件1"取组件名
b.在时间方法中 this.@refs.组件名 获取相关数据
HelloWorld.vue5

<template>
  <div>
    <h1>{{msg}}</h1>

    <!-- 二个子组件和孙组件 -->
    <hello-world6 ref="名字子组件1"></hello-world6>
    <hello-world6 ref="名字子组件2"></hello-world6>

    <button @click="buttonClick">按钮</button>

  </div>
</template>

<script>
  //父组件中导入子组件
import HelloWorld6 from "./HelloWorld6";

export default {
  name: 'HelloWorld',
  // 父组件中可以注册多个子组件
  components: {HelloWorld6},
  data () {
    return {
      msg: '父组件',
      testmsg: ['bobo','lixiaobo','bocai','给子组件传数组']
    }
  },
  methods: {
    //document.querySelector（"元素节点名"）。dom元素获取
    //
    buttonClick: function () {
      //开发中不用，很容易出问题，在开发中页面中途要插入多个组件，这个索引就会变化，不是0索引，索引往后面加
      // console.log(this.$children)
      // //父组件访问第一个子组件方法
      // console.log(this.$children[0].msgData())
      // //父组件访问子组件变量
      // console.log(this.$children[0].msg)
      // //父组件访问孙组件变量
      // console.log(this.$children[0].$children[0].msg)
      console.log("---------------------refs------------------")
      console.log(this.$refs)
      console.log(this.$refs.名字子组件1)
      console.log(this.$refs.名字子组件1.msg)
      console.log(this.$refs['名字子组件1'].msg)
    }
  }
}
</script>
<style>
</style>

子组件
HelloWorld6.vue

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <hello-world7></hello-world7>
  </div>
</template>

<script>
  import HelloWorld7 from "./HelloWorld7";
  export default {
    name: 'HelloWorld2',
    components: {HelloWorld7},
    data() {
      return {
        msg: '子组件'
      }
    },
    methods: {
      msgData: function () {
        return '子组件方法返回'
        console.log("子组件方法")
      }
    }
  }
</script>
<style>
</style>

孙组件

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld7',
    data() {
      return {
        msg: '孙组件'
      }
    },
    methods: {
    }
  }
</script>
<style>
</style>

index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
// import HelloWorld3 from '@/components/vue1/HelloWorld3'

import HelloWorld5 from "../components/vue1/HelloWorld5";
Vue.use(Router)

export default new Router({
  routes: [
    // {
    //   path: '/',
    //   name: 'HelloWorld',
    //   component: HelloWorld
    // },
    // {
    //   path: '/',
    //   name: 'HelloWorld3',
    //   component: HelloWorld3
    // },
    {
      path: '/',
      name: 'HelloWorld5',
      component: HelloWorld5
    }
  ]
})