vue3 父子/子传参

1.使用props，emit传参

// 父组件
<template>{{arr}}<test :arr="arr" @emitest="emitSon" />
</template><script lang="ts">
import { defineComponent,ref, watch} from 'vue'
import { ElMessage } from 'element-plus'
import test from './components/test.vue';
export default defineComponent({components:{test},setup () {let arr =ref([1,2,3])const emitSon = (e:Array<number>) => {arr.value = e}watch(arr,(newValue)=>{ElMessage({type:'success',message:`arr变化了${newValue}`,duration:1000})},{deep:true,     // 深度监听immediate:true // 首次监听})return{arr,emitSon}}
})
</script>// 子组件
<template><el-button @click="add">send emit + 4</el-button><el-button @click="del">send emit - 4</el-button>
</template><script lang="ts">
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
export default defineComponent({props:{arr:Array},setup (e:any,{emit}) {const add = () => {let arrs:Array<number> = e.arrarrs.push(4)emit('emitest',arrs)}const del = () => {let arrs:Array<number> = e.arrif(arrs.at(-1) == 4){arrs.pop()emit('emitest',arrs)}else{ElMessage.warning('最后一位不是4不能删除')}}return {add,del}}
})
</script>

2.使用setup语法糖里的defineProps，defineEmits传参

1.使用v-model:xxx

可参考官方组件事件 | Vue.js

// 父组件
<template><vmodule v-model:swval="swval" /> 父组件：{{swval}}
</template>
<script lang="ts">
import { defineComponent,ref} from 'vue'
import vmodule from './components/vmodule.vue'
export default defineComponent({components:{vmodule},setup () {let swval = ref(true)}return{swval}
})
</script>// 子组件
<template><el-switch v-model="swval" @click="send" />子组件：{{swval}}
</template>
<script setup lang="ts">
const props = defineProps({swval:{type:Boolean,default:false},
})
const emits = defineEmits(['update:swval'])
const send = () => {emits('update:swval',props.swval)
}
</script>

2.使用 :xxx="xxx"

// 父组件
<template><vmodule :swval="swval" @emitSon="emitSon" />父组件：{{swval}}
</template>
<script lang="ts">
import { defineComponent,ref} from 'vue'
import vmodule from './components/vmodule.vue';
export default defineComponent({components:{vmodule},setup () {let swval = ref(true)const emitSon= (e:any) => {swval.value = e}return {swval,emitSon,}}
})
</script>// 子组件
<template><el-switch v-model="swval" @click="edit"/>子组件：{{swval}}
</template>
<script setup lang="ts">
const props = defineProps({swval:{type:Boolean,default:false}
})
const emits = defineEmits(['emitSon'])
const edit = () => {emits('emitSon',props.swval)
}
</script>

vue3 父子/子传参相关推荐

【Vue3】第十四部分父子组件传参
[Vue3]第十四部分父子组件传参文章目录 [Vue3]第十四部分父子组件传参 14. 父子组件传参 14.1 父传子(props) 14.2 子传父(emit) 14.3 子传父(ref) 总 ...
react 子传参父_react子父传参有几种方法？
react子父传参有几种方法?下面本篇文章给大家介绍一下react父子组件传参(值)的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. react父子组件传参(值)的几种方法一 ...
VUE3 之组件传参
目录 1. 概述 2. 组件传参 3. 综述 4. 个人公众号 1. 概述韦奇定律告诉我们:大部分人都很容易被别人的话所左右,从而开始动摇.怀疑,最终迷失自我.因此我们要努力的坚定信念,相信自己,才 ...
vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
vue2.0父向子传参，子向父传参，路由传参
父向子传值: //父组件 <selectionGroup v-for="item in tab" :item="item"></selecti ...
vue2 父子组件传参回调函数使用
关键点: 父组件给子组件动态传参使用v-bind:属性key(多个单词用下划线拼接) 子组件接收父组件传参参数使用 props标签,+属性key多个单词用驼峰形式拼接) 子组件定义回调父组件函数子组 ...
Vue3 TS props传参报错TS2722: Cannot invoke an object which is possibly ‘undefined‘.
项目场景: 我用Props在子组件接受父组件传来的函数, 并向函数内传参调用. 问题描述 TS解析时认为props内的这个函数可能会是undefined, 所以直接报错. 原因分析: 这个函数在bef ...
vue3 router.push 传参路由跳转错误提示 Argument type {xxx} is not assignable to parameter type RouteLocationRaw
文章目录问题描述解决方法问题描述传参时,router.push中布尔值变量会给出一个错误提示 setup(){const router = useRouter();/** 查看已办任务的流程记 ...
react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...

vue3 父子/子传参

vue3 父子/子传参相关推荐

最新文章

热门文章