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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)