Vue~组件之间相互传递数据（父与子、子与父、子与子）

最新推荐文章于 2024-03-20 17:02:14 发布

夢鑰

最新推荐文章于 2024-03-20 17:02:14 发布

阅读量900

点赞数 1

分类专栏： Vue 文章标签： vue props

本文链接：https://blog.csdn.net/weixin_41620505/article/details/125932528

版权

Vue 专栏收录该内容

20 篇文章 5 订阅

订阅专栏

前言

使父组件与子组件进行数据交互

一、传值的目的

使父组件与子组件进行数据交互

二、使用步骤

1、父组件给子组件传递数据

通过props方式


<!-- 在父组件中  传值 -->

<childer-layout title="父组件传值"/>



<!-- 在子组件中 第一种方法  接收值 -->
props: ['title']


<!-- 在子组件中 第二种方法   接收值-->
props: {
  title: String //指定参数类型
}


<!-- 在子组件中 第三种方法  接收值 -->
props: {
   props: String,
   default: "默认值",//默认值
   required: true//必填
}

2、子组件给父组件传递数据

1、通过this.$emit('子组件在父组件定义中@后面的名称',value,....)

2、通过this.$parent.父组件方法

<!-- 在父组件中 第一种 接收值 -->

<childer-layout  @callBack="methodCall"/>

methodCall(需要接收的值1,需要接收的值2,需要接收的值3,....){

}

<!-- 在子组件中 第一种 传值 -->

<button  @click="sendData"/>
sendData(){
this.$emit('callBack',需要传递的值1,需要传递的值2,需要传递的值3,....)
}


//------------------------ ------ -------------------------------------

<!-- 在父组件中 第二种 接收值 -->

<childer-layout/>

methodCall(需要接收的值1,需要接收的值2,需要接收的值3,....){

}

<!-- 在子组件中 第二种 传值 --> 
<button  @click="sendData"/>
sendData(){
this.$parent.methodCall( 需要传递的值1,需要传递的值2,需要传递的值3,....)
}

3、子组件与子组件相互传递数据

1、传值通过props方式

2、回调值只能使用 this.$emit （不能使用this.$parent.）

<!-- 在子组件中 引用子组件 传值-->
<childer-childer-layout title="子组件传值"/>

<!-- 在子的子组件中 第一种方法  接收值 -->
props: ['title']


<!-- 在子的子组件中 第二种方法   接收值-->
props: {
  title: String //指定参数类型
}


<!-- 在子的子组件中 第三种方法  接收值 -->
props: {
   props: String,
   default: "默认值",//默认值
   required: true//必填
}

//------------------------------------------------------------------------
<!--在子组件中 引用子组件   接收值 --> 
<childer-childer-layout  @callBack="methodChildCall"/>

methodChildCall(需要接收的值1,需要接收的值2,需要接收的值3,....){

}

<!-- 在子的子组件中  传值 --> 
<button  @click="sendData"/>
sendData(){
this.$emit('methodChildCall',需要传递的值1,需要传递的值2,需要传递的值3,....)
}