vue3-组件传参及计算属性

🌈个人主页：前端青山
🔥系列专栏：Vue篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来vue篇专栏内容:vue3-组件传参及计算属性

vue3中的组件传参

1、父传子

2、子传父

toRef 与 toRefs

vue3中的计算属性

vue3 中的 watch监听器

vue3中的组件传参

组件关系：

父子 props、$panrent

子父 emit自定义事件 $children $refs

兄弟 eventbus中央事件总线 vue3如果需要实现eventbus 安装第三方库mitt

跨层级 provider inject

组件状态共享工具： vuex pinia

1、父传子

在父组件中给子组件设置自定义属性 tit，将要传递的参数赋值给tit属性

<!--父组件  -->
<template><p></p><Testvue3 :tit="schoolName"><span>123</span></Testvue3>
</template>

<script>
import Testvue3 from "@/components/Testvue3";
export default {name: "App",components: { Testvue3 },setup() {let schoolName = "千锋"; // 定义要传给子组件的数据  return {schoolName, // 要使用的变量抛出去，这样就可以在页面模板中使用该变量};},
};
</script>

在子组件中接收传过来的属性通过props ,这个和vue2 一样没有变化。

<!-- 子组件 -->

<template><p>{{ tit }}</p><button>点击事件,子传父</button>
</template>

<script>
export default {data() {return {};},props: ["tit"],setup(props) { // 参数props即为父组件传过来的参数console.log(props)return {//setup函数返回值为一个对象};},
};
</script>

2、子传父

给子组件绑定自定义事件，然后在setup中定义该事件对应的方法，因为setup中没有this ,this为undefined,所以vue的开发者为了解决该问题，在setup中提供了2个形参，prop和context
- props 为父传子的参数
- context 上下文对象，里面有emit 方法，可以实现子传父
子组件中多了 emits选项，该选项类似于props,接收父组件给子组件绑定的自定义方法，如果不加该选项，vue3 会提示警告。但不影响功能

<!-- 子组件 -->

<template><p>{{ tit }}</p><button @click="emit">点击事件,子传父</button>
</template>
<script>
import { reactive } from "vue";
export default {data() {return {};},emits: ["transfer"], // 在子组件中使用emits配置项，接收父组件给我绑定的自定义事件，用法类似于props,                       // 不加该配置项，控制台会提示警告setup(props, context) {console.log(11, props);console.log(22, context);// 定义方法function emit() {// 子传父 此处不用this,使用context上下文对象context.emit("transfer", 666);}return {//setup函数返回值为一个对象emit,};},
};
</script>

在父组件接收自定义事件，该事件对应的执行函数的形参就是传过来的数据，这个就和vue2一样啦。
```

<template><p></p><Testvue3 @transfer="showdata"><span>123</span></Testvue3>
</template>
<script>
import Testvue3 from "@/components/Testvue3";
export default {name: "App",components: { Testvue3 },setup() {function showdata(value) {console.log(value);}return {showdata,};},
};
</script>
```
toRef 与 toRefs

定义：toRef 创建一个ref 响应数据

语法：let name = toRef(person，'name') 将响应对象person中的name属性单独拿出来变成响应属性。

应用：一般用于将响应对象中的某个属性单独提供给外部使用
如下是使用toRef 前的代码：插值表达式模板中的 person 有点繁琐

<!-- 子组件 -->

<template><div><p>{{ person.name }} -- {{ person.age }} -- {{ person.job.type }} --{{ person.job.salary }}</p></div>
</template>

<script>
import { reactive } from "vue";
export default {setup() {let person = reactive({name: "张三",age: 20,job: {type: "web前端开发",salary: 30,},});return {person,};},
};
</script>

如下是使用toRef 后的代码，

<!-- 子组件 -->

<template><div><p><!-- 在模板中直接使用name,age,type,salary -->{{ name }} -- {{ age }} -- {{ type }} --{{ salary }}</p><p><button @click="name += '-'">修改name</button><button @click="salary++">修改薪水</button></p></div>
</template>

<script>
import { reactive, toRef } from "vue";
export default {setup() {let person = reactive({name: "张三",age: 20,job: {type: "web前端开发",salary: 30,},});// 将person 中的name 属性转换成ref 响应式数据，这样就可以直接在模板中使用了,以此类推let name = toRef(person, "name"); let age = toRef(person, "age");let type = toRef(person.job, "type");let salary = toRef(person.job, "salary");return {name,age,type,salary,};},
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>

使用toRefs 可以将对象中的多个属性转换成响应数据，代码如下：

<!-- 子组件 -->

<template><div><p>{{ name }} -- {{ age }} -- {{ job.type }} --{{ job.salary }}</p><p><button @click="name += '-'">修改name</button><button @click="job.salary++">修改薪水</button></p></div>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {setup() {let person = reactive({name: "张三",age: 20,job: {type: "web前端开发",salary: 30,},});//toRefs返回一个响应对象，该对象中每个属性都变成了响应属性了。这样就可以直接拿来在模板插值表达式中使用了let person1 = toRefs(person);// console.log(person1);return {...person1, // 使用后扩展运算符展开对象};},
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>

关于数据响应式设置的问题：

1、如何设置一个响应式数据？ ref reactive

2、如何将非响应式数据转为响应式数据？ toRef toRefs

3、如何将数据设置为只读数据？不能够修改 readOnly

vue3中的计算属性

同vue2不同，使用计算属性需要引入computed 方法

<template><p>姓：<input type="text" v-model="data.firstname" /></p><p>名：<input type="text" v-model="data.lastname" /></p><p>姓名：<input type="text" v-model="data.fullname" /></p>
</template>

<script>
// 引入对应的计算属性方法
import { reactive, computed } from "vue";
export default {name: "App",setup() {let data = reactive({firstname: "",lastname: "",fullname: "",});// 计算属性--简写// data.fullname = computed(() => {//   return data.firstname + data.lastname;// });// 计算属性--完整写法data.fullname = computed({get() {return data.firstname + data.lastname;},set(value) {console.log(value);data.firstname = value.substr(0, 1);data.lastname = value.substr(1);},});return {data,};},
};
</script>

vue3 中的 watch监听器

vue3 中的watch 也是组合式api中的一个方法，所以使用时，需要引入

<template><p>{{ sum }} <button @click="sum++">sum++</button></p><p>{{ fullname }} <button @click="fullname += '-'">修改姓名</button></p><p>{{ userinfo.name }}--{{ userinfo.age }}--{{ userinfo.job.type }}--{{userinfo.job.salary}}K<button @click="userinfo.age++">修改年龄</button><button @click="userinfo.job.salary++">修改薪水</button></p>
</template>
<script>
// 引入对应的计算属性方法
import { ref, watch, reactive } from "vue";
export default {name: "App",setup() {let sum = ref(0);let fullname = ref("张三");let userinfo = reactive({name: "李四",age: 20,job: {type: "web开发",salary: 20,},});//1、监听ref定义的响应式数据 immediate初始化就执行watchwatch(sum, (newvalue, oldvalue) => {console.log(newvalue, oldvalue);},{immediate:true});//2、 监听ref定义的多个响应式数据,immediate初始化就执行watchwatch([sum, fullname], (newvalue, oldvalue) => {console.log(newvalue, oldvalue);}, { immediate: true });
//3、 监听reactive 定义的响应式数据// 注意：此处oldvalue 无效（新值与旧值一样），默认是深度监听,immediate初始化就执行watchwatch(userinfo,(newvalue, oldvalue) => {console.log(newvalue, oldvalue);},{ immediate: true });return {sum,fullname,userinfo,};},
};
</script>

watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：

watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。

watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。