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)

相关推荐

  • vue3.0如何在全局挂载对象和方法

    vue3.0如何在全局挂载对象和方法

    目录 如何在全局挂载对象和方法 1.官方的说明 2.更新后的挂载方法 3.在全局使用 4.但是应用中的this对象已经不再是一个Vue对象了 vue3全局挂载和使用 如何在全局挂载对象和方法 1.官方的说明 Vue3.x已经不支持直接Vue.prototype.$http = () => {}这种方式来挂载全局对象,这是由于globalVue不再是构造函数,因此不再支持该构造函数. 2.更新后的挂载方法 这个是官网的说明 所以现在我们的办法就是这样 import { createApp } fr

  • Vue3.0中如何监听props方法

    目录 Vue3.0如何监听props 第一种 第二种 vue3.0监听props做数据回显 Vue3.0如何监听props 学习vue3.0记录下props监听: 第一种 直接监听这个props export default defineComponent({   props: {     isOpen: Boolean,   },   emits: {     "close-modal": null,   },   setup(props, context) {     watch(

  • vue3.0在子组件中触发的父组件函数方式

    目录 方式一 子组件 父组件 方式二 子组件 父组件 注:本文是基于vue3.0的语法 方式一 在script中引入 defineEmit ,import { defineEmit } from 'vue' ; 通过defineEmit定义事件,例如:const emit = defineEmit(['myclick']); 子组件定义了ClickEmit 事件,并且返回了一个函数,在点击事件里通过 emit("myclick") 传递出事件给父组件 在父组件中的 引用的子组件的标签上

  • vue3.0 子组件如何修改父组件传递过来的值

    目录 子组件修改父组件传递过来的值 使用toRefs进行解决 子组件向父组件传值emit的使用注意事项 子组件的写法 父组件使用 子组件修改父组件传递过来的值 vue 的子组件 不是 不能直接更改父组件的值,需要将props 的值 给到子组件,后再修改, 否则:Unexpected mutation of “props” prop. vue3提供了一个解决:toRefs:https://v3.cn.vuejs.org/api/refs-api.html#torefs toRefs 非常有用,这样

  • vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)

    vue3.0 移动端二次封装van-uploader实现上传图片(vant组件库)

    1.前提:业务需求,最多上传6张图片,并可以实现本地预览 2.解决方法:使用vant组件库中的van-uploader实现 3.代码实现 template <div class="upload-oss"> <van-uploader :after-read="onRead" :before-read="beforeRead" :accept="fileType" v-model="fileList&

  • Vue3.0版本强势升级点特性详解

    目录 一.Composition API: 组合API/注入API 二.自定义渲染API(Custom Renderer API) vue2.x架构问题 三.更先进的组件 Fragment组件 Suspense组件 四.更好的TS支持 五.更快的开发体验(vite开发构建工具) 六.按需编译,体积比Vue2.x更小(Tree shaking) 七.性能比2.x快1.2-2倍 diff算法的优化 render阶段的静态提升(render阶段指生成虚拟dom树的阶段) 事件侦听缓存 减少创建组件实例

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

    目录 父子传参,子修改父数据 父组件 子组件 父子组件传值(语法糖) 父子组件交互 父子传参,子修改父数据 父组件 父亲传值给儿子,儿子可以修改父亲的数据(同步) <template>   <div>     父组件     {{ data }}     <button @click="add()">修改</button>     <hr />     子组件:<Son />   </div> <

  • 如何实现iframe父子传参通信

    在最近的项目里面,用到了不少关于iframe父子传参通信的相关操作,记录一下,虽然很简单,但是确实十分有用的; iframe通信可以分为2种,跨域和非跨域两种.分别说明; 有一点很重要,iframe是可以给name 属性的;给上name 属性可以省下一些代码; 非跨域 父调子 //父页面 <button class="b" id="b">点击</button> <iframe src="a.html" name='c

  • 基于Django URL传参 FORM表单传数据 get post的用法实例

    POST和GET是web开发中常用的表单交互方法,是构建web前后端交互系统的顶梁柱,现将Django中的简单用法示例记录下来,以供后续查询和其他同学参考 1.URL传参 #前端html的链接中用模版标签把参数"x"传递给achievement这个应用的yearcontent方法 <td><a href={% url 'achievement:yearcontent' x %} >{{ x }}</a></td> #urls.py中用正则

  • Vue.js父与子组件之间传参示例

    例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法).而子组件componetA中,声明props参数'msgfromfa'之后,就可以收到父向子组件传的参数了.例子中将msgfromfa显示在<p>标签中. App.vue中 <component-a msgfromfa=&q

  • vue组件和iframe页面的相互传参问题及解决

    vue组件和iframe页面的相互传参问题及解决

    目录 vue组件和iframe页面相互传参 vue组件调用iframe页面方法和参数 iframe页面向vue组件传参 内嵌iframe页面并进行传值 vue组件和iframe页面相互传参 目前网上大多关于iframe父子传参的博客都是在叙述父页面是html文件,子iframe文件也是html文件,涉及到父页面是vue组件子iframe页面是html的博客多数讲的不是很明白: 而最近我在项目中碰到了这种需求:在vue组件中嵌入iframe页面,并实现父子传参: vue组件调用iframe页面方法

  • Vue路由传参props解耦的三种方式小结

    目录 路由组件传参 布尔模式 对象模式 函数模式 总结 路由组件传参 在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 布尔模式 商品展示界面传递id的动态参数 <template> <div class="home"> <TabBar></TabBar> <p>这是首页</p> <ul> &l

  • Vue3父子组件传参有关sync修饰符的用法详解

    Vue3父子组件传参有关sync修饰符的用法详解

    目录 单向数据流讲解 Vue2.x使用 定义事件的形式, 通知父组件修改 .sync 和 update: 的使用 父传子, 传递多个数据的简写 采用v-model简写(要求严格) Vue3.x使用 普通用法 简写 单向数据流讲解 单向数据流(堆可以修改,栈不可修改) 我们都知道, 父传子的数据, 是单向数据流,即子组件不能直接修改, 父组件传递过来的值 但实际上, 对于修改值, 真正是:基本数据类型不可修改,复杂数据类型不要修改引用地址(栈),它的值可以随便修改 Vue2.x使用 定义事件的形式

  • Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)

    Vue2.0 传值方式: 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况.当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍.我先给大家介绍Vue开发中常用的三种传值方式. Vue常用的三种传值方式有: •父传子 •子传父 •非父子传值 引

  • vue-router2.0 组件之间传参及获取动态参数的方法

    1.标签 <li v-for=" el in hotLins" > <router-link :to="{path:'details',query: {id:el.tog_line_id}}"> <img :src="el.image_list[0]"> <h3>{{el.tourism_name}} {{el.tog_line_id}}</h3> <p>{{el.addre

  • Angular父子组件通过服务传参的示例方法

    今天在使用ngx-translate做多语言的时候遇到了一个问题,需要在登录页面点击按钮,然后调用父组件中的一个方法. 一开始想到了@input和@output,然而由于并不是单纯的父子组件关系,而是包含路由的父子组件关系,所以并不能使用@input方法和@output方法. 然后去搜索一下,发现stackoverflow上有答案,用的是service来进行传参,发现很好用,所以和大家分享一下. 首先,创建一个service. shared-service.ts import { Injecta

随机推荐