vue3.0父子传参,子修改父数据的实现
作者：闹闹没有闹
这篇文章主要介绍了vue3.0父子传参,子修改父数据的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
父子传参,子修改父数据
父组件
父亲传值给儿子，儿子可以修改父亲的数据（同步）
<template>
<div>
父组件
{{ data }}
<button @click="add()">修改</button>
<hr />
子组件：<Son />
</div>
</template><script>
import Son from "./components/Son.vue";
import { provide, ref, shallowRef ,readonly,shallowReadonly} from "vue";
export default {
components: {
Son,
},
setup() {
let data = ref("123");
let updata = () => {
data += "==";
};
let add = ()=>{
data+="=12"
}
provide("updata",updata);
provide("show", data);
return {
data,
updata,
add
};
},
};
</script>
<style lang="less" scoped></style>子组件
<template>
<div>{{son}}</div>
<button @click="updataSon(12)">更改</button>
</template><script>
import { ref,inject } from "vue";
export default {
setup() {
const son = (inject("show"));
const updataSon = inject("updata")
return{
son,
updataSon
}
},
};
</script>
<style lang="less" scoped></style>父子组件传值(语法糖)
父子组件交互
<template> <el-icon :size="size" :color="color" @click="change"> <component :is="name"></component> </el-icon> </template>
<script setup>
import { defineProps, defineEmits, defineExpose} from 'vue'
// 定义传值类型
const props = defineProps({
name: {
type: String,
required: true,
},
size: {
type: String,
default: '',
},
color: {
type: String,
default: '',
},
})
// 定义事件名
const emit = defineEmits(['change'])
// 触发事件
const change =()=>{
emit('change',{name:21231,data:456})
}
defineExpose({
change,props
})
</script>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。