vue3 语法之父组件，子组件之间的数据传递

世事洞明皆学问，人情练达即文章。（《红楼梦》）

子组件使用v-model

父组件

// father.vue
<template><div class="father">{{ fatherRef }}</div><Child :fatherRef="fatherRef" @changeVal="changeVal"></Child></template><script setup lang="ts">import { ref } from "vue";import Child from "./Child.vue";const fatherRef = ref("1");function changeVal(val: string) {fatherRef.value = val;}</script><style lang="scss" scoped>.father {margin-top: 40px;margin-bottom: 40px;}</style>

通过computed函数，set函数触发emit方法。get获取父组件传过来的fatherRef

// child.vue
<template><input v-model="inputVal"/>
</template>
<script lang="ts" setup>
const props = defineProps<{fatherRef: String}>()
const emits = deineEmits(['changeVal'])const inputVal = computed({set:(val:String) => {emits('changeVal',val)},get: () => {return props.fatherRef}})
</script>

可以从父组件传递值和改变值的方法，然后子组件也可以使用v-model

例子中父组件传递 modelValue和update:modelValue方法父组件

<template><Child :modelValue="searchText" @update:modelValue="changeVal"> </Child></template><script setup lang="ts">import { ref } from "vue";import Child from "./Child.vue";const searchText = ref(1);function changeVal(val: number) {searchText.value = val;}</script><style lang="scss" scoped>.father {margin-top: 40px;margin-bottom: 40px;}.btn {font-size: 20px;color: red;}</style>

子组件

<template><input v-model="modelValue" />
</template><script setup lang="ts">import { computed, useAttrs, useSlots } from "vue";const props = defineProps<{modelValue: number;}>();// const emits = defineEmits(["changeVal"]);</script><style lang="scss" scoped>.child {}</style>

vue3 语法之父组件，子组件之间的数据传递相关推荐

Vue.js父与子组件之间传参父向子组件传参　　例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
Vue.js父与子组件之间传参父向子组件传参例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
uniapp 子组件 props拿不到数据_谈一谈使用 webpack 开发时，Vue 组件之间的数据传递...
•我们在学习Vue的时候,难免会使用各个组件之间传递数据.•先来介绍一下Vue中组件传递的方式,有父组件传递给子组件数据,子组件传递给父组件数据,父组件直接获取子组件中数据,子组件直接获取父组件数据以 ...
react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
VEU中的组件之间的数据传递
组价三部曲创建组件. 注册组件. 使用组件. 组件之间的数据传递的方式 1. 父传子 :通过props属性传递 2. 子传父通过$emit属性,用来发布自定义事件 3. 兄弟组件之间的传递 1.父 ...
WEB前端 vue学习二组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
Vue之组件之间的数据传递
Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递. 下列为在vue-cli创建项目中的操作一·父组件向子组件传递数据在Vue中 ...
3.vue3.2的父传子defineProps，子传父emits以及ref
1.父传子 <template><div class="container"><!-- 传递数据这里传了一个string 和一个list --&g ...
vue笔记（三）生命周期、组件（嵌套）、数据传递
生命周期文档一.生命周期 1.参考一 2.参考二二.自定义组件 1. 使用:<组件名></组件名> 2. 定义组件: (1)方法一:官网 let 组件变量名 = Vue.e ...
Android中Activity之间的数据传递（Intent和Bundle）
当一个Activity启动另一个Activity时,常常会有一些数据传过去,对于Activity之间的数据交换更简单,因为两个Activity之间进行数据传递交换更简单,因为两个Activity之间本 ...
Activity的创建步骤+Activity之间的数据传递+案例（人品测试器）
Android的四大组件: 1.activity(多层界面运用) 2.广播接收者 3.服务 4.内容提供者此外,我这里还会说道 5.多媒体编程(图形.声音.视频) 6.Fragment+动画 7.S ...

vue3 语法之父组件，子组件之间的数据传递

子组件使用v-model

可以从父组件传递值和改变值的方法，然后子组件也可以使用v-model

vue3 语法之父组件，子组件之间的数据传递相关推荐

最新文章

热门文章

vue3 语法之 父组件，子组件之间的数据传递

子组件使用v-model

可以从父组件传递值和改变值的方法，然后子组件也可以使用v-model

vue3 语法之 父组件，子组件之间的数据传递相关推荐

最新文章

热门文章

vue3 语法之父组件，子组件之间的数据传递

vue3 语法之父组件，子组件之间的数据传递相关推荐