vue3组件传值方式汇总

最新推荐文章于 2024-05-07 13:55:37 发布
最新推荐文章于 2024-05-07 13:55:37 发布
阅读量735 收藏 2
点赞数
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56489674/article/details/134687102
版权

1.props（父传子）

需要使用defineProps方法接受父组件传递来的数据，defineProps是v3提供的方法，不需要要引入，直接使用。

父组件：
<template>
  <div class="father">
      <CHILD01 msg="Vite Vue" />
  </div>
</template>

<script setup lang="ts">
import CHILD01 from './components/CHILD01.vue'
</script>
子组件：
//ts
<template>
  <h1>{{props.msg}}</h1>
</template>

<script setup lang="ts">
interface IPROPS  {
    msg?:string
}
const props:IPROPS = defineProps(['msg'])
</script>

//js
<template>
  <h1>{{props.msg}}</h1>//或者直接msg 不用写props
</template>

<script setup>
 const props = defineProps(['msg'])
</script>

2.自定义事件

 1.子组件

需要使用defineEmits方法触发自定义事件，defineProps是v3提供的方法，不需要要引入，直接使用。

<template>
 <button  @click="handler">点我触发自定义事件</button>
</template>

<script setup lang="ts">
const $emit =defineEmits(['xxx'])
const handler=()=>{
 $emit('xxx','传来的数据1','传来的数据2')
</script>
父组件：
<template>
  <div class="father">
      <CHILD01 @xxx="handle" />
  </div>
</template>
<script setup lang="ts">
import CHILD01 from './components/CHILD01.vue'
const handle=(params1:string,params2:string)=>{
console.log(params1,params2)
}
</script>

<style scoped>
.father {
width: 1000px;
height: 400px;
background-color: red;
margin: 0 auto;
}
</style>

3.全局数据总线（任意组件）

需要安装插件mitt：mitt - npm 

src\bus.js

//引入mitt插件:mitt一个方法,方法执行会返回bus对象
import mitt from 'mitt';
const $bus = mitt();
export default $bus;
组件1：
<template>
  <div class="child01">
    <h4>子组件01</h4>
    <button @click="handler">点我给child02传值</button>
  </div>
</template>

<script setup lang="ts">
import $bus from "../bus";
const handler = () => {
  $bus.emit("car", { car: "奔驰" });
};
</script>

<style scoped>
.child01 {
  width: 400px;
  height: 100px;
  background-color: skyblue;
  margin: 0 auto;
}
</style>
组件2：
<template>
  <div class="child02">
    <h4>子组件02</h4>
    <span>{{ states.car }}</span>
  </div>
</template>

<script setup lang="ts">
import $bus from "../bus"; //组合式API函数
import { onMounted, reactive } from "vue";
const states=reactive({
  car:''
})
//组件挂载完毕的时候,当前组件绑定一个事件,接受将来兄弟组件传递的数据
onMounted(
  () => {
    $bus.on("car", (car: string) => {
      states.car=car
    });
  }
  //第一个参数:即为事件类型第二个参数:即为事件回调
);
</script>

<style scoped>
.child02 {
  width: 400px;
  height: 100px;
  background-color: purple;
  margin: 0 auto;
}
/* .read-the-docs {
  color: #888;
} */
</style>

4.v-model(父子)

1.绑定一个v-model

父组件
<template>
  <div class="father">
    <h1>v-model:{{ money }}{{ pageNo }}--{{ pageSize}}</h1>
    <input type="text" v-model="info">
     <!-- <CHILD01 :modelValue="money" @update:modelValue="handler"></CHILD01> -->
     <!--
      v-model组件身上使用
      第一:相当有给子组件传递props[ modelValue] = 10000
      第二:相当于给子组件绑定自定义事件update : modelValue-->
     <CHILD01 v-model="money"></CHILD01>
    <!-- 绑定多个v-model  -->
     <CHILD02 v-model:pageNo="pageNo" v-model:pageSize="pageSize"></CHILD02>>
  </div>
</template>
<script setup lang="ts">
import CHILD01 from './components/CHILD01.vue' 
import CHILD02 from './components/CHILD02.vue' 
import {ref} from 'vue'
//v-model指令:收集表单数据,数据双向绑定 
// v-model也可以实现组件之间的通信,实现父子组件数据同步的业务
//父亲给子组件数据props
//子组件给父组件数据·自定义事件//引入子组件
let info = ref('');
//父组件的数据钱数
let money = ref (10000);
// const handler =(num:number) => {
//   //接受子组件数值 
//   money.value=num
// }
let pageNo=ref(0)
let pageSize=ref(3)
</script>

<style scoped>
.father {
width: 1000px;
height: 400px;
background-color: red;
margin: 0 auto;
}
</style>
子组件01
<template>
  <div class="child01">
    <h4>子组件01</h4>
    <div>钱：{{ modelValue }}</div>
    <button @click="handle">父子数据同步</button>
  </div>
</template>

<script setup lang="ts">
interface IPROPS  {
  modelValue:string
}
let props:IPROPS = defineProps(['modelValue'])
let $emit = defineEmits( [ 'update:modelValue' ]);
const handle =() => {
  // console.log(props)
  $emit('update:modelValue',props.modelValue + 1000);
}
</script>
<style scoped>
.child01 {
  width: 400px;
  height: 100px;
  background-color: skyblue;
  /* margin: 0 auto; */
}
</style>

2.绑定一个v-model 

子组件02
<template>
  <div class="child02">
    <h4>子组件02绑定多个v-model</h4>
    <button @click="$emit('update:pageNo',pageNo+1)">pageNo{{ pageNo }}</button>
    <button @click="$emit('update:pageSize',pageSize+1)">pageSize{{pageSize  }}</button>
    <span> </span>
  </div>
</template>

<script setup lang="ts">
defineProps(["pageNo", "pageSize"]);
let $emit = defineEmits([ 'update:pageNo' , 'update:pageSize'])
</script>
<style scoped>
.child02 {
  width: 400px;
  height: 100px;
  background-color: purple;
  margin: 0 auto;
}
/* .read-the-docs {
  color: #888;
} */
</style>

5.useAttrs 

父组件
<template>
  <div class="father">
    <H1>父组件</H1>
    <!-- <el-button type="primary" size="small" :icon="Edit">Primary</el-button>  -->
    <CHILD01
      type="primary"
      size="small"
      :icon="Edit"
      title="编辑按钮"
      @click="handle"
    ></CHILD01>
  </div>
</template>
<script setup lang="ts">
import CHILD01 from "./components/CHILD01.vue";
import { Edit } from "@element-plus/icons-vue";
const handle = () => {};
</script>

<style scoped>
.father {
  width: 1000px;
  height: 400px;
  background-color: red;
  margin: 0 auto;
}
</style>
子组件 
<template>
  <div class="child01">
    <h4>子组件01</h4>
    <el-button :="$attrs">Primary</el-button>
  </div>
</template>

<script setup lang="ts">
//接受父组件传递过来数据
// defineProps(["type ", "size", "icon"]);
//引入useAttrs方法:获取组件标签身上属性与事件 包括函数和自定义事件
import { useAttrs } from "vue";
//此方法执行会返回一个对象
let $attrs = useAttrs();
//万一用props接受title
let props = defineProps(["title"]);
// props 与useAttrs方法都可以获取父组件传递过来的属性与属性值
//但是props接受了,usekttrs方法就获取不到了
console.log($attrs);
</script>
<style scoped>
.child01 {
  width: 400px;
  height: 100px;
  background-color: skyblue;
  /* margin: 0 auto; */
}
</style>

会发现没有title了 

6.ref与$parent 

父组件
<template>
  <div class="father">
    <h1>父组件:{{ money }}</h1>
    <button @click="handle">找组件1借100</button>
    <hr />

    <CHILD01 ref="son"></CHILD01>
    <hr />
    <CHILD02 ref="dau"></CHILD02>
  </div>
</template>

<script setup lang="ts">
import CHILD01 from "./components/CHILD01.vue";
import CHILD02 from "./components/CHILD02.vue";
// ref:可以获取真实的DOM节点,可以获取到子组件实例vC
// $parent:可以在子组件内部获取到父组件的实例
import { ref } from "vue";
//父组件钱数
let money = ref(100000000);
let son = ref();
let dau = ref();

const handle = () => {
  money.value += 100;
  son.value.money += 100;//获取子组件的值
  son.value.ddd();
};
//对外暴露
defineExpose({ money });
</script>

<style scoped>
.father {
  width: 1000px;
  height: 400px;
  background-color: red;
  margin: 0 auto;
}
</style>
组件1 
<template>
  <div class="child01">
    <h4>子组件01</h4>
    <hr />
    <span>
      {{ money }}
    </span>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
let money = ref(666);
const ddd = () => {
  console.log("122");
};
//对外暴露
defineExpose({ money, ddd });//暴露数据给父组件

//父组件钱数
</script>
<style scoped>
.child01 {
  width: 400px;
  height: 100px;
  background-color: skyblue;
  /* margin: 0 auto; */
}
</style>
组件2
<template>
  <div class="child02">
    <h4>子组件02 {{ money }}</h4>
    <hr />
    <button @click="handle($parent)">点我父组件给我传100</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"; //儿子钱数
let money = ref(666);
const handle = ($parent) => {
  money.value += 100;
  $parent.money -= 100;//获取父组件的数据，子给父传值
};
</script>

<style scoped>
.child02 {
  width: 400px;
  height: 100px;
  background-color: purple;
  /* margin: 0 auto; */
}
/* .read-the-docs {
  color: #888;
} */
</style>

7.provide与inject 

父组件

<template>
  <div class="father">
    <h1>父组件{{ car }}</h1>
    <hr />
    <button @click="handle">点我改车</button>
    <CHILD01 ref="son"></CHILD01>

    <!-- <CHILD02 ref="dau"></CHILD02> -->
  </div>
</template>

<script setup lang="ts">
import CHILD01 from "./components/CHILD01.vue";
// import CHILD02 from "./components/CHILD02.vue";
//vue3提供provide(提供)与inject(注入),可以实现隔辈组件传递数据
import { ref, provide } from "vue";
let car = ref("法拉利");
//祖先组件给后代组件提供数据
//两个参数:第一个参数就是提供的数据key//第二个参数:祖先组件提供数据
provide("TOKEN", car);
const handle = () => {
  car.value = "bench";
};
</script>

<style scoped>
.father {
  width: 1000px;
  height: 400px;
  background-color: red;
  margin: 0 auto;
}
</style>

子组件

<template>
  <div class="child01">
    <h4>子组件01{{ car }}</h4>
    <CHILD02></CHILD02>
  </div>
</template>

<script setup lang="ts">
import CHILD02 from "../components/CHILD02.vue";
import { inject } from "vue";
let car = inject("TOKEN");
console.log(car);
</script>
<style scoped>
.child01 {
  width: 400px;
  height: 100px;
  background-color: skyblue;
  /* margin: 0 auto; */
}
</style>

孙子组件

<template>
  <div class="child02">
    <h4>子组件02:{{ car }}</h4>
    <button @click="handle">点我改车</button>
  </div>
</template>

<script setup lang="ts">
type car = object;
import { inject } from "vue";
let car = inject("TOKEN");
const handle = () => {
  car.value = "zixingche";
};
</script>
<style scoped>
.child02 {
  width: 400px;
  height: 100px;
  background-color: purple;
  /* margin: 0 auto; */
}
/* .read-the-docs {
  color: #888;
} */
</style>

 8.pinia

 见另一篇文章：vue3pinia使用-CSDN博客
枫落zz
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
七种Vue3传值方式
qq_53565944的博客
03-11 1万+
Vue3七种传值方式
vue3 的组件传值
jia632133535的博客
03-01 776
<template> <div class='mypage'> <div class="demo-pagination-block"> <el-pagination v-model:currentPage="pagenum" v-model:page-size="pagesize" :page-sizes="[1, 2, 3, 4]" .
vue3组件传值，父子兄弟组件传值
03-14
vue3父子组件传值，vue3组件传值，父子兄弟组件传值，props、emit、eventbus
vue3组件传值方法
零-J
01-12 6826
提示：vue3组件传值学习
vue3组件之间传值通讯
最新发布
zzx262625的博客
05-07 350
Vue 3 提供了多种组件间传值和通讯的方式。以下将以长博客的形式，详细解释这些方法及其应用场景。
VUE3_组件间传值的三种方法_setup语法糖_记录
热门推荐
weixin_45039579的博客
04-04 1万+
前言 记录下Vue3中setup语法糖集成到script标签后父子组件的传值方法。 一、父传子 父组件 //通过动态绑定的方式 <template> <div> <button>父组件</button> <Child :sex="sex" @FatherMethod"></Child> </div> <template> <script setup lang="ts"> //引入子组
vue3中的组件传值的方式
qwe0415的博客
04-25 2792
vue3组件传值
Vue3组件传值
qq_44476779的博客
09-05 5165
使用的是Vue3+Ts。
vue组件传值的三种方式
taotao3158的博客
12-04 184
父子组件之间传值 $emit() $on() $emit() this.$parent.xxx 正常的@xxx=“func” , this.$emit()方式 使用.sync可以给props双向绑定数据 由子组件自己控制何时传值 父亲组件 <template> <div> <p style="color: red;">使用.sync双向绑定</p> 父组件输入框：<input v-model="inputValue" /&
Vue 组件间传值及事件触发Demo
09-07
Vue 组件间传值及事件回调
vue3父子组件传值.doc
02-05
vue3父子组件传值
vue3组件传值，依赖注入
09-01
包含vuex，Props（父组件向子组件传值 传递一层方便 ） Vue子组件向父组件传值（this.$emit()方法），父组件向子组件传递（不止一层 provide，inject）
Vue父子组件传值的一些坑
10-14
主要介绍了Vue父子组件传值的一些坑，帮助大家更好的理解和使用vue父子组件，感兴趣的朋友可以了解下
Vue组件传值
qq_49189784的博客
05-15 1369
Vue组件传值
vue3 组件传值的几种方式
weixin_45885731的博客
09-07 1万+
第一种： 父类传子类。 // 父组件 <template> <son :isShow="data.isShow"></son> </template> <script> import son from '../components/son.vue' import { reactive } from 'vue' // 千万别忘记了 这个导入 export default { components: { ...
vue3中组件传值的方法
m0_57262819的博客
06-30 5751
vue3组件传值
VUE3-组件之间传值《四》
故里2130
12-21 4861
组件之间的传值，分为3种方式。
vue3组件传值的方式以及使用
07-25
在Vue 3中，组件传值的方式和使用方法如下： 1. Props：父组件通过props向子组件传递数据。 ```html <!-- Parent Component --> <template> <ChildComponent :message="message" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { message: 'Hello from parent' }; } }; </script> <!-- Child Component --> <template> <div>{{ message }}</div> </template> <script> export default { props: ['message'] }; </script> ``` 2. Emit：子组件通过emit向父组件传递数据。 ```html <!-- Parent Component --> <template> <ChildComponent @messageUpdated="handleMessageUpdated" /> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleMessageUpdated(message) { console.log(message); } } }; </script> <!-- Child Component --> <template> <button @click="updateMessage">Update Message</button> </template> <script> export default { methods: { updateMessage() { this.$emit('messageUpdated', 'Hello from child'); } } }; </script> ``` 3. Provide/Inject：祖先组件通过provide提供数据，后代组件通过inject来注入数据。 ```html <!-- Ancestor Component --> <template> <div> <ChildComponent /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, provide() { return { message: 'Hello from ancestor' }; } }; </script> <!-- Child Component --> <template> <div>{{ message }}</div> </template> <script> export default { inject: ['message'] }; </script> ``` 4. Refs：父组件可以通过$refs来访问子组件，从而调用子组件的方法或获取子组件的数据。 ```html <!-- Parent Component --> <template> <div> <ChildComponent ref="childComponent" /> <button @click="getChildMessage">Get Child Message</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { getChildMessage() { const message = this.$refs.childComponent.message; console.log(message); } } }; </script> <!-- Child Component --> <template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello from child' }; } }; </script> ``` 这些是Vue 3中常用的组件传值方式和使用方法。根据具体情况，选择适合的方式来实现组件之间的数据传递。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值