vue跨组件传值爷孙组件传值

2022年6月2日09:57:51

爷

<template>
  <div>
    <about></about>
  </div>
</template>
<script>
import about from "./About";
export default {
  components: { about },
  provide() {
    return {
      reload: {
        name:"malinshu"
      },
    };
  }
};
</script>

父

<template>
  <div>
    <hack></hack>
  </div>
</template>
<script>
import hack from './hack'
export default {
  components:{hack}
};
</script>

孙

<template>
  <div class="hack">
    {{reload.name}}
    <input type="text" v-model="myData.name">
  </div>
</template>
<script>
export default {
  inject: ['reload'],
  data(){
    return{
      myData:this.reload
    }
  }
}
</script>

vue跨组件传值爷孙组件传值
因为传的是对象，所以是浅拷贝，要深拷贝，可以用

myData:JSON.parse(JSON.stringify(this.reload))

vue跨组件传值爷孙组件传值
其实用法和props一样，然而区别在于provide可以深层（爷孙）传值，不仅仅是父子之间的传值

  • 作者：码林鼠
  • 原文链接：https://blog.csdn.net/weixin_41254345/article/details/109500823
    更新时间：2022年6月2日09:57:51 ，共 588 字。