vue3基础 —— 子传父

须知：vue里子组件无法改变父组件的值

思路：

1. 父组件定义数据 —— const data = ref(false)

2. 把值传递给子组件 —— :sendData = "data"

3. 子组件接收数据，使用、修改完成后 —— props: ["sendData"] —— const a = props.sendData —— a = true

4. 触发父组件事件，传值 —— emit("emitEffect", { emit: a })

5. 被触发的父组件，接收值，并更新自己最开始定义的数据 —— @emitEffect = "changeData" —— const changeData = (value) => { data = value.a }

例子：

父组件：


<template><div class="index"><div class="index__nav"><Indexnav :changeNavFu=changeNavFu @changeNavfu="changeNav" /></div></div>
</template><script>
import { ref } from 'vue'
import Indexnav from './Indexnav.vue'export default {name: 'index',components: { Indexnav, Indextab },setup () {const changeNavFu = ref(false)const changeNav = (val) => {changeNavFu.value = val.dataconsole.log(val)                 // {data:false}}return { changeNavFu, changeNav }}
}
</script><style lang="scss" scoped>
.index{font-size: .13rem;overflow: hidden;width: 100%;height: 100vh;&__nav {width: 2rem;}
}
</style>

子组件：

<template><div class="Indexnav" :style="isCollapse?'width:.63rem':''"><div class="Indexnav__header" @click="changeNav"><div :class="isCollapse?'sider-toggler':'sider-toggler active'"></div></div></div>
</template><script>
import { ref } from 'vue'export default {name: 'Indexnav',components: { Location },props: ['changeNavFu'],setup (props, { emit }) {           // 一定要记得把props和emit传入setup函数const isCollapse = ref(props.changeNavFu)const changeNav = () => {isCollapse.value = !isCollapse.valueemit('changeNavfu', { data: isCollapse.value })}return { isCollapse, changeNav }}
}
</script><style lang="scss" scoped>
@import '../../assets/fonts/iconfont.css';.Indexnav{position: absolute;width: 2rem;top: 0;left: 0;height: 100%;box-shadow: .01rem .02rem .1rem rgba(0,0,0,.5);border-right: 1px solid #f2f4f9;transition: all .1s linear;
}
</style>

vue3基础 —— 子传父相关推荐

vue3.0 组件使用引用传值父传子子传父
vue3.0 组件使用引用传值父传子子传父组件的创建组件引入在html中使用组件传值父传子子接收参数子传父父接收参数组件的创建 1.将所需功能封装在components目录下 ...
Vue3/ Vue3 组件通讯 -- 子传父方法流程总结
一 .Vue3 组件通讯 -- 子传父方法流程 1. 首先子组件通过 defineEmit 写入传递事件名并定义变量名 const 变量名one = defineEmit([' 传递事件名']) ...
vue3组件通信的方式父传子 props 和子传父 $emit 非父子组件的通信Provide和Inject 全局事件总线mitt库
vue3组件通信的方式一.父传子 props 和子传父 $emit 1.父传子 props 在开发中最常见的就是父子组件之间通信,父组件往子组件通信使用的是props.子组件往父组件通信则使用的是 ...
Vue3中的父传子和子传父如何实现
大家都知道Vue2中父传子是通过父组件绑定一个属性,子组件再用props进行接收,子传父是通过this.$emit那么Vue3中有什么不同呢?以下为您解答谜团 #Vue3的父传子一.现在父组件调用子 ...
3.vue3.2的父传子defineProps，子传父emits以及ref
1.父传子 <template><div class="container"><!-- 传递数据这里传了一个string 和一个list --&g ...
【vue3.0学习】父传子子传父
父传子 <template><div id="app"><h1>父组件</h1><p>{{ money }}</p ...
Vue3.2——父传子、子传父
## 父传子父组件: <template><div class="home"><test-com :info="msg" tim ...
VUE3 子传父父传子双向传递
组件参数传递父传子 father.vue <template > <!-- 父传子实现 2.向vue页面中的子组件传递该属性 :传给子组件的名字(自定义)="对应定义在父 ...
vue3.0组件之父传子，子传父,父传孙
父组件<template> <!-- <div>{{name}}</div> {{computedsx}} {{sum}}<button @click= ...

vue3基础 —— 子传父

vue3基础 —— 子传父相关推荐

最新文章

热门文章