关于vue.js:P17-vue3子组件访问父组件和跟组件-parent-and-root

$parent

• App.vue

  <script>import Content from "./components/Content.vue";export default {  data() {    return {      message: '',    };  },  methods:{    getChildMsg:function (value){      console.log(value);      this.message=value    }  },  components:{    Content  }}</script><template><div>  <!--拿到子组件 Content 的msg数据 -->  <!--在父组件通过v-on监听自定义的子组件的自定义事件 -->  <Content @injectMsg="getChildMsg"> </Content>  <h2>{{message}}</h2></div></template>

• Content.vue

<template>  <div>    <!--组件是能够复用 -->    <Hello_kugou :message="msg" static='56' :list="list" ref="hellokugou"></Hello_kugou>    <!--父子组件拜访形式 ,父组件拜访子组件 $refs $children-数组类型（vue2）-->    <!-- 子组件拜访父组件 $parent 尽量不必-->    <!-- 子组件拜访跟组件 $root-->    <p ref="p"></p>  </div></template><script>import Hello_kugou from "./Hello_kugou.vue";export default {  data(){//让每一个组件对象都返回一个对象，不对数据净化    return{      msg: 'hellokugoumsg',      list: [1,2,3],      a: 20    };  },  components:{    Hello_kugou  },  methods:{    // 在子组件理  $emit 触发事件    sendParent:function (){      //this.$emit('事件名称', '发送的事件参数')      this.$emit('injectMsg', this.msg)    }  },  mounted() {    //console.log(this.$refs);  },  name: "Content"}</script><style scoped></style>

• Hello_kugou.vue

<template>  <div>    <h2>hello kugou</h2>    <h2>{{message2}}--调用父组件的变量</h2>  </div></template><script>export default {  data(){    return{      a: 10,    }  },  name: "Hello_kugou",  //props: ['message', 'static']  props:{    // message: String,//类型限度    // static: String    message2:{      type:String,      default:"nihhaokugou",      //required:true    },  },  mounted() {    console.log(this.$parent.a)  }}</script><style scoped></style>

• 拿到了父组件的数据

  mounted() {    console.log(this.$parent.a)  }

$root