vite+vue3+ts父子组件传值，及属性监听watch用法

您所在的位置：网站首页 › vue函数组件watch用法 › vite+vue3+ts父子组件传值，及属性监听watch用法

vite+vue3+ts父子组件传值，及属性监听watch用法

2023-08-25 03:56| 来源: 网络整理| 查看: 265

在上一篇文章的demo中，我们成功的制作了简单的todolist，本篇我们来了解下父子组件传值的操作。本篇依旧采用vite+vue3+ts的组合，以及使用ant-design-vue的UI组件，对于这套组合和UI组件的项目部署，本篇不再讲解有需要了解的可以看《vite+vue3+ts简单例子todolist》。下边我们直接来看下父子组件传值。

父子组件传值父传子 defineProps用法

在vue2中我们使用属性和props的组合，在vite+vue3+ts里边也是一样用使用属性，只是在接收时候使用的是defineProps。我们先来父组件的代码Father.vue

这是父组件下方是子组件的内容 import SonVue from './Son.vue'; import { ref } from 'vue'; // 传给子组件的内容 const msg = ref('这是父组件传给子组件的内容');

然后就是子组件中获取传入的值了，也就是defineProps在vite+vue3中的使用了，Son.vue代码：

这是子组件接收的父组件信息 {{props.msg}} // defineProps 接收父组件传入的值，使用方式分为ts的用法和非ts的用法 // 非ts的用法 const props = defineProps({ msg: { type: String, default: '' } });

上边是defineProps非ts的用法，下边使用ts的写法

这是子组件接收的父组件信息 {{props.msg}} // defineProps 接收父组件传入的值，使用方式分为ts的用法和非ts的用法 // 非ts的用法 /* const props = defineProps({ msg: { type: String, default: '' } }); */ // ts的用法 interface PropsType { msg: string } const props = withDefaults(defineProps(), { msg: '' // 默认值 }); 子传父 defineEmits用法

上边是父组件传值到子组件defineProps的使用，下边我们再来看下子组件传值父组件的方式，与vue2也是一样使用事件的方式，只是这里使用了defineEmits，下边我们看下defineEmits的使用。 Father.vue

这是父组件子组件触发父组件接收的值 {{receiveMsg}} 下方是子组件的内容 import SonVue from './Son.vue'; import { ref } from 'vue'; // 接收子组件的传入的值 const receiveMsg = ref(''); // 子组件触发的方法 const onReceiveMsg = (params:string) => { console.log('接收子组件的值', params); receiveMsg.value = params; }

子组件使用defineEmits触发父组件的方法非ts的用法，Son.vue代码：

这是子组件接收的父组件信息点击传值给父组件参数 import { Button as AButton, Input as AInput } from "ant-design-vue"; import { ref } from 'vue' const inputVal = ref(''); // 子组件通过defineEmits触发父组件的方法 // 非ts的用法 const emit = defineEmits(["onReceiveMsg"]); const sendMsg = () => { // 传input值给父组件 emit("onReceiveMsg", inputVal.value); }

使用ts的用法，Son.vue

这是子组件接收的父组件信息点击传值给父组件参数 import { Button as AButton, Input as AInput } from "ant-design-vue"; import { ref } from 'vue' const inputVal = ref(''); // 子组件通过defineEmits触发父组件的方法 // 非ts的用法 // const emit = defineEmits(["onReceiveMsg"]); // ts的用法 interface EmitType { (e: "onReceiveMsg", params: string): void } const emit = defineEmits(); const sendMsg = () => { // 传input值给父组件 emit("onReceiveMsg", inputVal.value); } 暴露组件自己的属性 defineExpose用法

在vue3中增加了暴露组件自己属性的方法，让子组件暴露自己的属性，然后父组件应用，也类似子组件直接传值给父组件了。这里我们先来子组件的代码 Son.vue:

这是子组件接收的父组件信息 import { Input as AInput } from "ant-design-vue"; import { ref } from 'vue' const inputVal = ref(''); // 子组件通过defineExpose暴露自己的属性 // 子组件暴露的方法 const exposeFun = (name:string) => { console.log('子组件暴露自己的属性', name); } // 使用defineExpose暴露inputVal和exposeFun defineExpose({ inputVal, exposeFun });

然后是父组件调用子组件暴露出来的属性

这是父组件使用子组暴露的属性子组件触发父组件接收的值 {{receiveMsg}} 下方是子组件的内容 import {Button as AButton} from 'ant-design-vue'; import SonVue from './Son.vue'; import { ref } from 'vue'; // 接收子组件的传入的值 const receiveMsg = ref(''); // 父组件接收子组件暴露的方法，使用子组件的ref const sonRef = ref // 由于ts认为inputVal可能位undefined不能赋值给string的reveiveMsg // 因此使用了一个断言 receiveMsg.value = sonRef.value?.inputVal as string; // 触发子组件暴露的方法 sonRef.value?.exposeFun('父组件'); }

以上就是vue3中父子组件传值的方法，defineProps和defineEmits以及defineExpose的使用。

watch用法

上边我们介绍了父子组件的传值方法，这里我们再来介绍下vue3中对属性监听watch的用法，我们先来构建一个组件的架子，里边有ref和reactive的方式声明的变量，因为两种方式的监听有点区别： Watch.vue基础代码

Watch用法 {{item}} import { ref, reactive } from 'vue'; import {Input as AInput} from 'ant-design-vue'; const inputVal = ref(''); const data = reactive list: [] }); const onInput = () => { if(inputVal.value){ data.list.push(inputVal.value); inputVal.value = ''; } };

然后使用watch对inputVal和list的监听

Watch用法 {{item}} import { ref, reactive, watch } from 'vue'; import {Input as AInput} from 'ant-design-vue'; const inputVal = ref(''); const data = reactive list: [], name: '' }); const onInput = () => { if(inputVal.value){ data.list.push(inputVal.value); data.name = inputVal.value; inputVal.value = ''; } }; // watch监听ref声明属性的变化 watch(inputVal, (newVal, oldVal)=> { console.log('watch监听inputVal的变化 newVal ------>', newVal); console.log('watch监听inputVal的变化 oldVal ------>', oldVal); }); // watch监听reactive声明属性的变化 watch(() => data.name, (newVal, oldVal)=> { console.log('watch监听data.name的变化 newVal ------>', newVal); console.log('watch监听data.name的变化 oldVal ------>', oldVal); }); watch(()=> data.list, (newVal, oldVal)=> { console.log('watch监听data.list的变化 newVal ------>', newVal); console.log('watch监听data.list的变化 oldVal ------>', oldVal); }, {deep: true}); // vue3的watch也可以同时监听多个 watch([inputVal, ()=> data.name],(newVal, oldVal) => { console.log('watch监听inputVal和data.name的变化 newVal ------>', newVal); console.log('watch监听inputVal和data.name的变化 oldVal ------>', oldVal); });

在对list数组的监听中需要加上deep才能监听到数组的变化，因此又加入了data.name可以和inputVal对比使用，这就是vue3中watch的用法了。

以上就是本文的内容了，后边有空在给路由的使用和生命周期钩子函数整理出来，对于vite+vue3+ts的这套组合开发项目也就不成问题了，对于vue3中使用的vuex感觉既然有了好用的pinia可以作为了解，项目中可以使用pinia来处理store，如果对pinia不了解可以来看《新的好朋友Pinia，引领状态管理新时代》进一步了解。

如有疑问可以留言，也可以到QQ群一起探讨： QQ群1: 657011407， QQ群2: 492593055，也可以到微信找我 shenzhipeng1023

【本文地址】

vite+vue3+ts父子组件传值，及属性监听watch用法

vite+vue3+ts父子组件传值，及属性监听watch用法

今日新闻

推荐新闻