vue组件之间进行传值的方法

前言

目前在做vue的项目，用到了子组件依赖其父组件的数据，进行子组件的相关请求和页面数据展示，父组件渲染需要子组件通知更新父组件的state，父子组件之间的传值一般有三种方法：

父传子子传父非父子传值

注意：

父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

 接下来，我们会通过实例代码来看的更清晰，理解更容易：

1.父组件向子组件进行传值

 父组件代码：

<template>
 <div>
   父组件：
   <el-input v-model="val" style="width:300px" />
   <child :value="val" />
 </div>
</template>

<script>
 import child from './child.vue'

export default {
   name: 'Parent',
   data() {
     return {
       val: '我是父组件'
     }
   },
   components: {
     child
   },

}
 </script>

子组件代码：

<template>

<div class="child">
       子组件： {{  value  }}
   </div>

</template>

<script>

export default {
   name: 'App',
   data() {
       return {
       }
   },
   props: ['value']

}
</script>
 <style scoped>
 .child {
     margin-top: 20px;
 }
 </style>

2.子组件向父组件进行传值

父组件代码：

<template>
 <div>
   父组件：
   <el-input v-model="val" style="width:300px" />
   <child :value="val" @bindMsg='msgFun' />
 </div>
</template>

<script>
 import child from './child.vue'

export default {
   name: 'Parent',
   data() {
     return {
       val: '我是父组件'
     }
   },
   components: {
     child
   },
   methods: {
     msgFun(childVal) {
       console.log(childVal,'childVal')
       this.val = childVal
     }
   }

}
 </script>

子组件代码：

<template>

<div class="child">
       子组件： {{  value  }}
       <el-button @click="$emit('bindMsg', '我是子组件')">点击改变父组建数据</el-button>
   </div>

</template>

<script>

export default {
   name: 'App',
   data() {
       return {
       }
   },
   props: ['value'],

}
</script>
 <style scoped>
 .child {
     margin-top: 20px;
 }
 </style>

3.非父子组件之间的传值 

.sync可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据

ref绑定在子组件上，引用的指向就是子组件的实例，父组件可以通过 ref 主动获取子组件的属性或者调用子组件的方法

父组件代码：

<template>
 <div>
   父组件：
   <el-input v-model="val" style="width:300px" />
   <el-button @click="childRefClick">父组件ref点击</el-button>
   <child :value="val" @bindMsg='msgFun' :data.sync='data' ref='child' />

</div>
</template>

<script>
 import child from './child.vue'

export default {
   name: 'Parent',
   data() {
     return {
       val: '我是父组件',
       data: ''
     }
   },
   components: {
     child
   },
   methods: {
     msgFun(childVal) {
       console.log(childVal, 'childVal')
       this.val = childVal;

},
     childRefClick() {
       //ref获取子组件实例的属性和方法
       const child = this.$refs.child
       console.log(child.name)

child.childBtnClick("调用了子组件的方法")
     }
   }

}
 </script>

子组件代码：

<template>

<div class="child">
       子组件： {{  value  }}
       <el-button @click="childBtnClick">点击改变父组建数据</el-button>
   </div>

</template>

<script>

export default {
   name: 'App',
   data() {
       return {
           currenData: {}
       }
   },
   props: ['value', 'data'],

methods: {
       childBtnClick(val) {
           console.log(val,'val')
           this.$emit('bindMsg', val || '我是子组件')
       },

},

}
</script>
 <style scoped>
 .child {
     margin-top: 20px;
 }
 </style>

非父子组件之间的传值方式还有slot插槽，vuex数据状态管理器等等

来源：https://blog.csdn.net/weixin_42974827/article/details/126651267