【Vue3】第十四部分父子组件传参

文章目录

【Vue3】第十四部分父子组件传参
14. 父子组件传参
- 14.1 父传子(props)
- 14.2 子传父(emit)
- 14.3 子传父(ref)
总结

14. 父子组件传参

14.1 父传子(props)

父组件

<script lang="ts" setup>import {reactive, ref} from 'vue'import Children from './Children.vue';const list = reactive<number[]>([1,2,3])const title = ref<string>('我是父组件标题')
</script><template><div><h1>我是父组件</h1><hr><Children :list="list" :title="title"></Children></div>
</template>

子组件

<script lang="ts" setup>// 这种方法接收,接收到的值都是any// const {title,list} = defineProps(['title','list'])// 定义一个type,去限制definePropstype IPrpps =  {title:string,list:number[]}// 这样做的好处是可以限制接收参数的类型,并且在模板种可以直接使用defineProps<IPrpps>()</script><template><div><h1>我是子组件</h1><h3>父亲传入的数据: --- {{title}} --- {{list}}</h3></div>
</template>

withDefaults:用来设置Props默认值

<script lang="ts" setup>// 这种方法接收,接收到的值都是any// const {title,list} = defineProps(['title','list'])// 定义一个type,去限制definePropstype IPrpps =  {title:string,list:number[]}// 这样做的好处是可以限制接收参数的类型,并且在模板种可以直接使用withDefaults(defineProps<IPrpps>(),{title:'我是默认值',// 注意数组对象需要list:()=>[1,2,3]})</script><template><div><h1>我是子组件</h1><h3>父亲传入的数据: --- {{title}} --- {{list}}</h3></div>
</template>

14.2 子传父(emit)

父组件

<script lang="ts" setup>import Children from './Children.vue'// 当自定义事件被触发时调用该函数const getInfo = (data:string) =>{console.log(data);}
</script><template><div><h1>我是父组件</h1><hr><!-- 绑定自定义事件 --><Children @click-Info="getInfo"></Children></div>
</template>

子组件

<script lang="ts" setup>import {ref} from 'vue'const detail = ref<string>('今天天气晴朗')// defineEmits传入的是一个数组,数组种写的是自定义事件的名称,可以触发多个自定义事件const $emit = defineEmits(['click-Info1','click-Info2'])const dispatchDetail1 = () =>{$emit('click-Info1',detail)}const dispatchDetail2 = () =>{$emit('click-Info2',detail)}
</script><template><div><h1>我是子组件</h1><button @click="dispatchDetail1">派发给父组件1</button><button @click="dispatchDetail2">派发给父组件2</button></div>
</template>

14.3 子传父(ref)

父组件

<script lang="ts" setup>import {reactive, ref} from 'vue'import ChildrenVue from './Children.vue';const childrenRef = ref()type Idata = {message:string,list:string[]}const data = reactive<Idata>({message:'',list:[]})// 将实例身上的数据存起来const getData = () =>{data.message = childrenRef.value?.messagedata.list = childrenRef.value?.list}
</script><template><div><ChildrenVue ref='childrenRef'/><button @click="getData">获取子组件身上的实例</button><div>{{data.message}}</div><div v-for="item in data.list" :key="item">{{item}}</div></div>
</template>

子组件

<script lang="ts" setup>import {ref} from 'vue'const message = ref('子组件信息')const list = ref<string[]>(['a','b','c'])// 父组件获取到子组件的实例但是子组件没有暴露出去,父组件没办法接收// 可以使用defineExposedefineExpose({message,list})
</script>

总结

以上就是今天要讲的内容，希望对大家有所帮助！！！

【Vue3】第十四部分父子组件传参相关推荐

vue组件间通信传递数据的四种方式（路由传参、父子组件传参、兄弟组件传参、深层次传参）
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
vue2 父子组件传参回调函数使用
关键点: 父组件给子组件动态传参使用v-bind:属性key(多个单词用下划线拼接) 子组件接收父组件传参参数使用 props标签,+属性key多个单词用驼峰形式拼接) 子组件定义回调父组件函数子组 ...
VUE中父子组件传参（简单明了）
· 父组件向子组件传递参数 child.vue如下 <template><div class="childClass"><h3>子组件内容< ...
【vue2】子组件向父组件传参方法汇总
一.前言最近在复习vue,总结一下父子组件通信的方式.希望能够一起进步. 二.代码 1.项目介绍有三个子组件,School.vue.Student.vue.Grade.vue.其中App.vue引 ...
微信小程序之父子间组件传参
1.创建组件打开微信开发者工具,创建组件,会生成四个文件:wxml,wxss,js,json 在wxml中: <view>我是组件A</view> 在js中: Compone ...
VUE3 之组件传参
目录 1. 概述 2. 组件传参 3. 综述 4. 个人公众号 1. 概述韦奇定律告诉我们:大部分人都很容易被别人的话所左右,从而开始动摇.怀疑,最终迷失自我.因此我们要努力的坚定信念,相信自己,才 ...
组件传参的终极版，事件车，父子传参的祖宗。
如果简单的组件传参父子,子父传参就够了,但是如果兄弟之间传参就比较麻烦了, 事件车. 最后的还可以关闭监听消息@click="$root.$off('msg1')
Vue-admin工作整理（四）：路由组件传参
路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...
vue3子组件给父组件传参
子组件传参: const emit = defineEmits(['自定义事件名字A']) // 给父组件传参 emit('自定义事件名字A',数据) 父组件接收参数: <子组件标签名 @自定义 ...

【Vue3】第十四部分父子组件传参

【Vue3】第十四部分父子组件传参

文章目录

14. 父子组件传参

14.1 父传子(props)

14.2 子传父(emit)

14.3 子传父(ref)

总结

【Vue3】第十四部分父子组件传参相关推荐

最新文章

热门文章

【Vue3】第十四部分 父子组件传参

【Vue3】第十四部分 父子组件传参

文章目录

14. 父子组件传参

14.1 父传子(props)

14.2 子传父(emit)

14.3 子传父(ref)

总结

【Vue3】第十四部分 父子组件传参相关推荐

最新文章

热门文章

【Vue3】第十四部分父子组件传参

【Vue3】第十四部分父子组件传参

【Vue3】第十四部分父子组件传参相关推荐