【vue3.0学习】父传子子传父

父传子

<template><div id="app"><h1>父组件</h1><p>{{ money }}</p><Son :money="money"></Son></div>
</template><script>
import { ref } from "@vue/reactivity";
import Son from "./components/Son.vue";
export default {name: "App",components: {Son,},setup() {const money = ref(100);return { money };},
};
</script><style>
</style>

<template><div><h1>子组件</h1><p>{{ money }}</p></div>
</template><script>
export default {name: "Son",props: ["money"],setup(props) {console.log(props.money);},
};
</script><style>
</style>

子传父

<template><div id="app"><h1>父组件</h1><p>{{ money }}</p><Son :money="money" @changeMoney="changeMoney"></Son></div>
</template><script>
import { ref } from "@vue/reactivity";
import Son from "./components/Son.vue";
export default {name: "App",components: {Son,},setup() {const money = ref(100);const changeMoney = (val) => {// val 是子组件传出来的值console.log(val);money.value = val;};return { money, changeMoney };},
};
</script><style>

<template><div><h1>子组件</h1><p>{{ money }}</p><button @click="changeMoney">花20元</button></div>
</template><script>
export default {name: "Son",props: ["money"],setup(props, ctx) {console.log(props.money);//定义函数 抛出 值const changeMoney = () => {ctx.emit("changeMoney", 20);};return { changeMoney };},
};
</script><style>
</style>

要注意的是不是this.$emit 来抛出自定义事件了而是在setup的第二个参数中的方法 emit

【vue3.0学习】父传子子传父相关推荐

Vue3.0学习 - 第六节，什么是ref ，ref入门
ref入门 1.什么是ref? ref和reactive一样也是用来实现响应式数据的方法由于reactive必须传递一个对象,所以导致在企业开发中, 如果我们只想让某个变量实现响应式的时候会很麻烦, ...
vue3.0学习笔记 (suspense组件 defineAsyncComponent异步引入)
通过defineAsyncComponent异步引入 <template><div><Suspense>// 这两个插槽名称是固定的// defalut:这里面写的 ...
VUE3.0学习笔记（一）-创建VUE项目
一.介绍-VUE CLI Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 实现的交互式的项目脚手架. 通过 @vue/cli + @vue/cli-s ...
前端学习（2675）：vue3.0学习建议
vue3.0中props父子传值的改动
前言: 对vue3.0的学习以及对技术更新升级内容的整理与使用,这里分析下他的props父子传值的改动. vue官方入口目录一.vue2.0中props的用法 1.父组件中 a.vue中 2.子组 ...
Vue3.0基础教程：条件渲染：v-if v-else-if v-if；列表渲染：v-for
Vue3.0 学习笔记 4 条件渲染 v-if指令 v-if指令用于动态渲染一块内容,只有当该指令的表达式值为true时才渲染,也可配套使用v-else指令设置一个else-if块和else块 < ...
【Vue3 造轮子项目 ------ kaite-ui】基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI
基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI 前言前段时间笔者一直忙于学习Vue3方面新知识,比如如何从vue2.0版本过渡到vue3.0,如何理解 ...
vue3.0 组件使用引用传值父传子子传父
vue3.0 组件使用引用传值父传子子传父组件的创建组件引入在html中使用组件传值父传子子接收参数子传父父接收参数组件的创建 1.将所需功能封装在components目录下 ...
vue3.0组件之父传子，子传父,父传孙
父组件<template> <!-- <div>{{name}}</div> {{computedsx}} {{sum}}<button @click= ...

【vue3.0学习】父传子子传父

【vue3.0学习】父传子子传父相关推荐

最新文章

热门文章

【vue3.0学习】父传子 子传父

【vue3.0学习】父传子 子传父相关推荐

最新文章

热门文章

【vue3.0学习】父传子子传父

【vue3.0学习】父传子子传父相关推荐