Vue组件传值方式(props属性,父到子,子到父,兄弟传值)
作者：web Rookie
这篇文章主要介绍了Vue组件传值方式(props属性,父到子,子到父,兄弟传值),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
前言
Vue是数据驱动视图更新的框架，平时写业务时，都会把页面不同模块拆分成一个一个vue组件， 所以对于vue来说组件间的数据通信非常重要
提示：以下是本篇文章正文内容，下面案例可供参考
一、props是什么？
props是Vue实例上的一个属性,用于组件的传值作用:为了接收外面传过来的数据，与data、methods等是一个级别的配置项。props在子属性和父属性之间形成一个单向向下的绑定(单向数据流)- 当父属性更新时，它会向下流向子属性，但不会反过来。这可以防止子组件意外改变父组件的状态
使用规则
<script>
export default {
//使用方式一
props:["count"],
//使用方式二
props:{
count:{
//type:类型规定
type:Number,
//default:默认值
default:0,
//require:是否是必传
require:true,
}
},
}
</script>
二、父传子 props
实现步骤
- 父传子通过
props实现 - 父组件通过自定义变量传入子组件
- 子组件利用
props接收父组件值 - 接收
props不能修改,但是可以在组件中直接使用 - 如果想要修改
props,先把props赋值给其他变量,在进行修改
代码实现
//父组件
<template>
<div style="outline:1px solid red">
<h1>我是父组件</h1>
<button @click="count+=1">要传递的值{{count}}</button>
//第三步通过v-bind动态传入子组件
<Child :count="count"></Child>
</div>
</template>
<script>
//第一步导入组件
import Child from "../child/index.vue"
export default {
//第二步组件注册
components:{
Child,
},
data () {
return {
count: 1
}
}
}
//子组件
<template>
<div style="outline:1px solid green">
<h1>我是子组件</h1>
// 第二步在页面中使用
<div>接收父组件传值:{{count}}</div>
</div>
</template>
<script>
export default {
//第一步利用 props 接收
//可以直接在页面中使用,但不可修改;修改需要先将 props 中的数据赋值给 data 中的变量
// props:["count"],
props:{
count:{
type:Number,
default:0,
require:true,
}
},
}
效果展示
二.子传父 $emit
实现步骤
- 子传父通过
$emit实现 - 在子组件中通过
$emit方法传值给父组件 - 在父页面中的子组件标签中自定义事件接收
代码实现
//子组件
<template>
<div style="outline:1px solid green">
<h1>我是子组件</h1>
<button @click="give">传递给父组件</button>
</div>
</template>
<script>
export default {
methods:{
give(){
//第一步调用 $emit 传递参数
//emit 中第一个参数是在父页面中接收的 事件名称
//emit 中第二个尝试是要传递的数据
this.$emit("child",`我是子组件值+ ${new Date().getTime()}`)
}
}
}
// 父组件
<template>
<div style="outline:1px solid red">
<h1>我是父组件</h1>
<div>我是接收子组件的值:{{this.childValue}}</div>
// 第一步在子组件中自定义事件接收 emit 传递的事件
<Child :count="count" @child="accept"></Child>
</div>
</template>
<script>
import Child from "../child/index.vue"
export default {
components:{
Child,
},
data () {
return {
childValue:"",
}
},
methods:{
// 第二步在事件接收使用 子组件的传值
accept(obj){
this.childValue = obj
}
}
}
效果展示
三.兄弟传值 EventBus
实现步骤
- 兄弟之间传值通过 EventBus实现
- 在components文件中新建一个 js 文件,页面中导入Vue实例,然后导出一个new Vue()
- 在需要兄弟之间传值的组件中导入这个文件
- 传值时通过导入的文件调用$emit 实现($emit("事件名称",需要传递的值))
- 接收时通过导入的文件调用$on通过回调函数实现
代码实现
// component 文件夹中新建 eventBus.js 文件,用来实现兄弟组件通信 import Vue from "vue"; export default new Vue()
// 组件 A
<template>
<div style="width: 100%; height: 100px; outline: 1px solid red">
<button @click="send">A组件给B组件传值</button>
</div>
</template>
<script>
import bus from "../eventBus";
export default {
methods: {
send() {
bus.$emit("share", `我是A组件+ ${new Date().getTime()}`);
},
},
};
</script>
<style lang="less" scoped>
</style>
// 组件 B
<template>
<div style="width:100%;height:100px;outline:1px solid green">
接收A组件的值{{this.accept}}
</div>
</template>
<script>
import bus from "../eventBus"
export default {
data(){
return{
accept:''
}
},
mounted(){
bus.$on("share",val=>{
this.accept = val
})
}
}
</script>
效果展示
总结
- 父传值子通过
props实现 - 子传父通过
emit自定义事件 实现 - 兄弟传值通过
eventBus实现
目前暂时总结三种常用的组件传值方法
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。