vue3.0父子传参,子修改父数据的实现

 更新时间:2022年04月29日 10:43:13   作者:闹闹没有闹  
这篇文章主要介绍了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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue跳转外部链接始终有localhost的问题

    vue跳转外部链接始终有localhost的问题

    这篇文章主要介绍了vue跳转外部链接始终有localhost的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue中如何定义数据示例详解

    Vue中如何定义数据示例详解

    这篇文章主要给大家介绍了关于Vue中如何定义数据的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • vue轮播组件实现$children和$parent 附带好用的gif录制工具

    vue轮播组件实现$children和$parent 附带好用的gif录制工具

    这篇文章主要介绍了vue轮播组件实现,$children和$parent,附带好用的gif录制工具,需要的朋友可以参考下
    2019-09-09
  • vue中el-table多层级嵌套的具体实现

    vue中el-table多层级嵌套的具体实现

    本文主要介绍了vue中el-table多层级嵌套的具体实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-10-10
  • Vue动态组件与内置组件浅析讲解

    Vue动态组件与内置组件浅析讲解

    闲话少说,我们进入今天的小小五分钟学习时间,前面我们了解了vue的组件,我们本文主要是讲解vue的动态组件和内置组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Vue用mixin合并重复代码的实现

    Vue用mixin合并重复代码的实现

    这篇文章主要介绍了Vue用mixin合并重复代码的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • 详解Vue3.0 前的 TypeScript 最佳入门实践

    详解Vue3.0 前的 TypeScript 最佳入门实践

    这篇文章主要介绍了详解Vue3.0 前的 TypeScript 最佳入门实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • Vue.js第二天学习笔记(vue-router)

    Vue.js第二天学习笔记(vue-router)

    这篇文章主要为大家详细介绍了Vue.js第二天的学习笔记,关于vue-router的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • Vue中iframe 结合 window.postMessage 实现跨域通信

    Vue中iframe 结合 window.postMessage 实现跨域通信

    window.postMessage() 方法可以安全地实现跨源通信,在一个项目的页面中嵌入另一个项目的页面,需要实现父子,子父页面的通信,对Vue中iframe 结合 window.postMessage 实现跨域通信相关知识感兴趣的朋友跟随小编一起看看吧
    2022-12-12
  • Vue如何解决每次发版都要强刷清除浏览器缓存问题

    Vue如何解决每次发版都要强刷清除浏览器缓存问题

    这篇文章主要介绍了Vue如何解决每次发版都要强刷清除浏览器缓存问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08

最新评论