3.vue3.2的父传子defineProps，子传父emits以及ref

1.父传子

<template><div class="container"><!-- 传递数据 这里传了一个string 和 一个list --><Hello title="我是hello的爸爸" :list='list'/><hr><h4>子组件传数据过来了 {{fromSon}}</h4></div>
</template><script setup>
import { reactive, toRefs } from 'vue'
//导入子组件
import Hello from '@/components/HelloWorld'
const list = reactive([{ id: 1, name: '哈哈哈' },{ id: 2, name: '嘿嘿嘿' },{ id: 3, name: '呵呵呵' },
])
</script>

子接收

<template><div class="container">我是Hello<h5>父组件传了一句话过来 String---- {{title}}</h5><h5>父组件传了一个数组过来 Array --- {{list}}</h5></div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'// 通过defineProps接收，之后直接声明defineProps({title:String,list:Array})
</script>

2.子传父 emits传递

<template><div class="container"><button @click="clickTap">点击这里给父组件传递些许数据</button></div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'// 这里可以传递多个值const list = reactive([1,2,3,4])// defineEmits内跟一个数组，数据内写绑定的事件const emit = defineEmits(['on-click'])//进行数据传递const clickTap = () => {emit('on-click',list,true)}
</script>

父接收

<template><div class="container"><!-- 传递数据 这里传了一个string 和 一个list --><Hello @on-click="getList" /><hr><h4>子组件传数据过来了 {{fromSon}}</h4></div>
</template><script setup>
import { reactive, toRefs } from 'vue'
import Hello from '@/components/HelloWorld'const fromSon = reactive([])
const getList = (list,flag) => {// 这里不能直接复制，会破坏双休绑定数据fromSon.push(...list) console.log(flag);console.log('子组件传过来的值',list);
}
</script><style lang="scss" scoped></style>

3.子传父通过ref传递

<template><div class="container"><button @click="clickTap">点击这里给父组件传递些许数据</button></div>
</template><script setup>
import { reactive, toRefs } from 'vue'
// 这里可以传递多个值
const list = reactive([1,2,3,4])
// defineEmits内跟一个数组，数据内写绑定的事件
const emit = defineEmits(['on-click'])
const clickTap = () => {emit('on-click')
}
// 暴露出list
defineExpose({list
})
</script>

父接收

<template><div class="container"><!-- 传递数据 这里传了一个string 和 一个list --><Hello ref="menus" @on-click="getList" /></div>
</template><script setup>
import { reactive, toRefs,ref } from 'vue'
import Hello from '@/components/HelloWorld'// 还可以通过ref进行字传父
const menus = ref(null)    const getList = (list,flag) => {console.log(menus.value);
}
</script>

3.vue3.2的父传子defineProps，子传父emits以及ref相关推荐

vue3之组件通信（props父传子，子传孙）（ts定义数组类型）
目录 vue3之组件通信 1 props父传子,子传孙 1-1 父组件 1-2 子组件 1-3 孙组件 2:父子传值 2:-1 父组件向子组件传值 Props 2-2 子组件向父组件传值 emit 3 ...
Vue3.2——父传子、子传父
## 父传子父组件: <template><div class="home"><test-com :info="msg" tim ...
vue3 setup 父传子，子传父
vue3父子组件传值 vue3 setup父子传值父组件把值传给子组件举例:父组件: 子组件父组件给子组件传值: <FatherComponent/> <son-compone ...
vue3.0父传子，父传孙，子传孙，孙传父，孙传子的传值
1.父组件 <template><div class="Parent" ref="Parent"><el-button @clic ...
Vue组件化开发--组件通信方式-父传子、子传父、非父子组件传值
一.概述以脚手架搭建的Vue项目为笔记背景. 如果将所有的代码逻辑全部放到一个组件中,代码是非常的臃肿和难以维护的. 并且在真实开发中,可能会有更多的内容和代码逻辑,对于扩展性和可维护性来说都是非常 ...
VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
React中的组件通信——父传子、子传父、Context
0.认识组件间的通信在开发过程中,我们会经常遇到需要组件之间相互进行通信: 比如App可能使用了多个Header,每个地方的Header展示的内容不同,那么我们就需要使用者传递给Header一些数据 ...
vue 事件调用传参_vue如何在父组件指定点击事件后向子组件传递参数并调用子组件的事件？...
可以给父组件写一个ref属性,父组件可以通过ref拿到子组件中的数据和方法(即例子中子组件的say方法),这样在父组件中就可以触发子组件的事件了.而父组件向子组件传参可以通过prop属性(即例子中的f ...
Vue.js父与子组件之间传参父向子组件传参　　例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
Vue.js父与子组件之间传参父向子组件传参例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...

3.vue3.2的父传子defineProps，子传父emits以及ref

1.父传子

子接收

2.子传父 emits传递

父接收

3.子传父通过ref传递

父接收

3.vue3.2的父传子defineProps，子传父emits以及ref相关推荐

最新文章

热门文章

3.vue3.2的父传子defineProps，子传父emits以及ref

1.父传子

子接收

2.子传父 emits传递

父接收

3.子传父 通过ref传递

父接收

3.vue3.2的父传子defineProps，子传父emits以及ref相关推荐

最新文章

热门文章

3.子传父通过ref传递