关注前端 | 前端博客
当前位置: VUE > provide/inject隔代组件传值(祖先组件传给其任意后代元素)

provide/inject隔代组件传值(祖先组件传给其任意后代元素)

2020-11-15 分类:VUE 作者:管理员 阅读(46)

提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。如果传入的值是字符串,数字,布尔值等基本类型则会无响应!!!

爷传孙(所有后代组件都能拿到该值,但传动态值必须是个对象!!!)

Parent

<template>
    <section>
   
        <Son :dt.sync="dt" :name="name" :age="age" :gender="gender" :job="job" @isClick="isClick" @add="add" @upRocket="getData"></Son>
   
        <input type="text" v-model="name">
        <input type="text" v-model="age">
        <input type="text" v-model="gender">
        <input type="text" v-model="job">
        <input type="text" v-model="obj.msg">
        <input type="text" v-model="dt.a">
    </section>
</template>

<script>
import Son from './Son';
export default {
    data() {
        return {
            name: '李四',
            age: '18',
            gender: '男',
            job: '程序员',
            obj:{
              msg:'爱你哟'
            },
            dt:{
              a:1
            }
        }
    },
     provide(){
        return {
            data:this.obj
        }
    },
    components: {
        Son
    },
    methods: {
        add() {
            console.log('parent 的 add 方法')
        },
        isClick() {
            console.log('parent 的 isClick 方法')
        },
        getData(data){
          console.log('接收孙子发来的数据',data)
        }
    }
};
</script>

Son

<template>
    <section>
        <div class="mt-10">
          <grandchildren v-bind="$attrs" v-on="$listeners" />
        </div>
        {{name}}
        {{age}}
        son=> {{data.msg}}
        {{dt}}
    </section>
</template>

<script>
import grandchildren from './Grandchildren';
export default {
    components: {
        grandchildren
    },
    inject:['data'],
    props: {
      dt:{
          type: Object
      },
        name: {
            type: String,
            default: 'default'
        },
        age: {
            type: String,
            default: 'default'
        }
    }
};
</script>

Grandchildren

<template>
  <section>
    <div>
      {{ $attrs['job'] }}  在$attrs里面只会有props没有注册的属性
      <br>
      <p>bottom 性别=> {{ $attrs['gender'] }}</p>
      <p>bottom 工作=> {{ $attrs['job'] }}</p>
   
      <button @click="sendData">传递给爷爷的数据</button>
     Grandchildren=>{{data.msg}}
     <input type="text" v-model="data.msg">
    </div>
  </section>
</template>

<script>
  export default {
    name:'grandchildren',
    data(){
      return {

      }
    },
    inject:['data'],
    mounted() {

      console.log(this.$parent.$parent);
      console.log(this.$listeners);
      // this.$listeners.isClick();
      // this.$listeners.add();
    },
    methods:{
      sendData(){
        this.$emit("upRocket",'来自孙子的数据');
      }
    }
  };
</script>

结语

在 父组件上 运用 (provide)后代需要的数据, 后代任一 一代 注入(inject)对于key的数据,便可以取到,如果想要响应式,那么只需要 在父组件身上 provide 数据是以对象的形式即可,这样你在父组件对此对象的改变会和后代使用同步,当然,后代对此对象的改变也会同步体现在父组件身上。

vue组件传值方式

  • Vuex
  • Bus
  • 父子传值:props 和 $emit、ref和$parent
  • 隔代传值:provide/inject、v-bind=“$attrs”

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(2) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
2

感谢您让我添加个鸡腿!

支付宝
微信
标签:

上一篇:

下一篇:没有了,已经是最新文章

共有 0 条评论 - provide/inject隔代组件传值(祖先组件传给其任意后代元素)

博客简介

一个不知名的前端菜鸟,梦想能够飞上青天!
掘金 思否 npm github

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线