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