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.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.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初始化就执行watch
watch(sum, (newvalue, oldvalue) => {
console.log(newvalue, oldvalue);
},{immediate:true});
//2、 监听ref定义的多个响应式数据,immediate初始化就执行watch
watch([sum, fullname], (newvalue, oldvalue) => {
console.log(newvalue, oldvalue);
}, { immediate: true });
//3、 监听reactive 定义的响应式数据
// 注意：此处oldvalue 无效（新值与旧值一样），默认是深度监听,immediate初始化就执行watch
watch(
userinfo,
(newvalue, oldvalue) => {
console.log(newvalue, oldvalue);
},
{ immediate: true });
return {
sum,
fullname,
userinfo,
};
},
};
</script>
watch和watchEffect都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：
watch只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。
watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。
