uniapp 祖孙传值法

参考文档

注：父子组件渲染的一个过程是： 父create => 子created => 子mouted => 父mouted

方法一

1. provide提供, inject 接收

祖页面

<template>
  <div class="hello">
    <div class="mg-b20">我是 props 页面</div>
    <input type="text" v-model="value" />
    {{value}}---最外面组件
    <propsFather :value="value"></propsFather>
  </div>
</template>
 
<script>
import propsFather from "@/component/propsFather.vue";
export default {
  name: "props",
  components: { propsFather },
  provide() { // 这里的 provide 传值
//这里传 this,父组件获取的就是this,但是显示的值是this.value,子组件获取的值,就是this.value,展示的值，也是this.value
//如果这里传的值是this.value，那么父组件获取的值就是this.value,但是子组件就接收不到值了
      return { 'parent': this }
  },
  data() {
    return { value:'' };
  }
};
</script>

父页面

<template>
  <div class="childContent">
    <div>我是 中间 组件</div>
    <propsChild></propsChild>
  </div>
</template>

<script>
import propsChild from "@/component/propsChild.vue";

export default {
  name: "father",
  components: {  propsChild },
  data() {
    return {  };
  },
};
</script>

孙页面:

<template>
  <div class="childContent">
    <div>我是 最里面 组件</div>
    <div>value值：{{getVal}}</div>
  </div>
</template>
<script>
export default {
  name: "child",
  inject: ["parent"],
  data() {
    return {   };
  },
  computed: {
        getVal() {  return this.parent.value  }
   }
};
</script>

展示效果:

WeChatc4b387f6743732b970ed8100bd088f36.jpg

方法二

1. props 传值

祖页面

<template>
  <div class="hello">
    <div class="mg-b20">我是 props 页面</div>
    <input type="text" v-model="value" />
    {{value}}---最外面组件
    <propsFather :value="value"></propsFather>
  </div>
</template>
 
<script>
import propsFather from "@/component/propsFather.vue";
export default {
  name: "props",
  components: {  propsFather },
  data() {
    return {  value:''  };
  }
};

父页面

<template>
  <div class="childContent">  
    <div>我是 中间 组件</div>
    value值：{{value}}
    <propsChild :value="value"></propsChild>
  </div>
</template>

<script>
import propsChild from "@/component/propsChild.vue";
export default {
  name: "child",
  props: {
    value: { type: String }
  },
  components: { propsChild },
  data() {
    return {}
  }
};
</script>

孙页面

<template>
  <div class="childContent">
    <div>我是 最里面 组件</div>
    <div style="margin-top:10px;">value值：{{value}}</div>
  </div>
</template>

<script>
export default {
  name: "child",
 props: {
      value: { type: String }
  }
  data() {
    return {  };
  },
};
</script>