Home Vue Vue3

# 1.Provide (对象) 提供数据

vue
// App.vue  
<template>
  <div>
    <home></home>
  </div>
</template>
<script>
import Home from "./Home.vue";
export default {
  components: {
    Home,
  },
  //provide 提供数据
  provide: {
    // 对象写法无法获取 this
    name: "Saber",
    age: 18,
  },
};
</script>
<style scoped></style>
# 2.Inject 注入数据


vue
// Home.vue 
<template>
  Home Page
  <!-- 成功展示数据 -->
  <h3>name:{{ name }}</h3> 
  <h3>age:{{ age }}</h3>
</template>
<script>
export default {
  // 数据注入  
  inject: ["name", "age"], // 注入的属性名
};
</script>
<style scoped></style>
参考结果：


VOA_Provide_Inject_show


# 3.Provide (函数) 注入数据


vue
// App.vue
<template>
  <div>
    <home></home>
  </div>
</template>
<script>
import Home from "./Home.vue";
export default {
  components: {
    Home,
  },
  //provide 提供数据
  provide() {
    console.log(this); // 可以获取到 this 为 Proxy
    return {
      name: "Saber",
      age: 18,
    };
  }
};
</script>
<style scoped></style>
// Home.vue  
<template>
  Home Page
  <!-- 成功显示数据 -->
  <h3>name:{{ name }}</h3> 
  <h3>age:{{ age }}</h3>
</template>
<script>
export default {
  // 数据注入
  inject: ["name", "age"],
};
</script>
<style scoped></style>
参考结果：


VOA_Provide_Inject_fn


# 5.Provide 不是响应式


vue
// App.vue
<template>
  <div>
    <home></home>
     <button @click="changeName">changeName</button>
  </div>
</template>
<script>
import Home from "./Home.vue";
export default {
  components: {
    Home,
  },
  //provide 提供数据
  provide() {
    console.log(this); // 可以获取到 this 得到 Proxy
    return {
      name: "Saber",
      age: 16,
      nameLength: this.names.length // 这里获取 data 里面的数据
    };
  },
  data(){
    return{
      names:["Neko","Nico","Aimer"]
    }
  },
  methods:{
    changeName(){
      this.names.push("Aphrodite") 
      console.log(this.names);
    }
  }
};
</script>
<style scoped></style>
// Home.vue  
<template>
  Home Page
  <!-- 成功显示数据 -->
  <h3>name:{{ name }}</h3> 
  <h3>age:{{ age }}</h3>
  <h3>nameLength:{ { nameLength } }</h3>
</template>
<script>
export default {
  // 数据注入
  inject: ["name", "age","nameLength"],
};
</script>
<style scoped></style>
参考结果：


VOA_Provide_not_responsive


# 5.Provide 使用 computed 变成响应式


vue
// App.vue
<template>
  <div>
    <home></home>
     <button @click="changeName">changeName</button>
  </div>
</template>
<script>
import Home from "./Home.vue";
import { computed } from 'vue'
export default {
  components: {
    Home,
  },
  //provide 提供数据
  provide() {
    console.log(this); // 可以获取到 this 得到 Proxy
    return {
      name: "Saber",
      age: 16,
      nameLength: computed( () => this.names.length) // 这里用 computed, 参数写成箭头函数，获取 data 里面的数据
    };
  },
  data(){
    return{
      names:["Neko","Nico","Aimer"]
    }
  },
  methods:{
    changeName(){
      this.names.push("Aphrodite") 
      console.log(this.names);
    }
  }
};
</script>
<style scoped></style>
// Home.vue
<template>
  Home Page
  <!-- 成功显示数据 -->
  <h3>name:</h3> 
  <h3>age:</h3>
  <h3>nameLength:</h3>  <!-- 返回是 ref 对象，使用 value 获取 -->
</template>
<script>
export default {
  // 数据注入
  inject: ["name", "age","nameLength"],
};
</script>
<style scoped></style>
VOA_Provide_responsive


# 6. 总结


    

  • provide 是给子孙组件传递数据的，兄弟组件不能使用
    • 

  • provide 不能自身使用
    • 

  • provide 写成对象形式不能获取 this
    • 

  • provide 写成函数可以获取 this
    • 

  • provide 的数据不是响应式的
    • 

  • provide 使用 computed 可以让数据变成响应式
    • 

  • provide 使用 computed 获取的是个 ref 对象，需要用 value 来获取
    • 

  • 当然数据共享用的最多的还是 vuex
    •