Vue组件之间的传值方式,一般分为三种,父给子传值, 兄弟之间传值, 子给父传值。
父给子传值
顾名思义, 父给子传值,就是组件之间有嵌套关系,是包含的传给被包含的
在 ‘父亲’ 中的操作
传给 ‘子’ big 和 se
<子组件标签 se='red' big='20px'></子组件标签>
在 ‘子’ 中的操作
接收 ‘父’ 传过来的 big 和 se
<!--在模板中应用传递来的数据-->
<input :style="{color:se,font-size:big}">
<script> export default {
props:['se','big'] //在这里设置要接受的值
</script>
}
父给子传值, ’子‘ 组件修饰父组件传递过来的值
最简单的一种方法 应用 sync
在’父’ 中的操作
<子组件标签 se.sync='red' big='20px'></子组件标签>
在‘子’ 中的操作
在 子中 创建操作按钮 , 点击按钮,改变颜色,其中 update 是固定语法 : 后面是要传入的值的名称 , 后面是要传入的数值。
<button @click="$emit('update:se','blue')">修改</button>
子 给 父 传值的传值
在 ’父‘ 中的操作
父组件,自定义事件 @jieshou 所对应的处理函数 其中的参数,就是接收的数据,如果有多个数据,可以用多个参数接收,
<template>
<div id="app">
<h2>{{dt}}</h2>
注意:receive事件方法不要设置() -->
<com-son @jieshou="receive"></com-son>
//子组件
</div>
</template>
<script>
// 引入、注册、使用 子组件
import ComSon from './components/Son.vue'
export default {
components: {
'com-son': ComSon
},
data () {
return {
dt: ''
}
},
methods: {
// msg可以接收到当前事件传递过来的数据
receive (msg) {
this.dt = msg
}
}
}
</script>
在 ‘子’ 中的操作
触发点击事件,就会传给 父组件 值 ‘我过去了哈’
<template>
<div id="son">
我是子组件
<button @click="chuan()">汇报学习情况</button>
</div>
</template>
<script>
export default {
methods: {
chuan () {
// this.$emit(事件名称, 传递的数据,数据,数据……)
this.$emit('jieshou', '我传过去了哈')
// 这里的 'jieshou' 是父组件声明的事件名称
}
}
}
</script>
兄弟传值
兄弟传值 顾名思义 二者之间没有嵌套关系 , 这就得用一个中间物来联系二者,一般称为bus
定义一个中间传值的 bus.js
import Vue from 'vue'
export default new Vue()
接受数据的兄弟
import bus from 'bus.js' //导入bus
created(){
// 定义事件,注意箭头函数应用
bus.$on('chuan', data=>{
console.log(data)
//data就是 '借点钱'
})
}
发送数据的兄弟
<button @click="sendMsg">给我兄弟代个话</button>
import bus from 'bus.js' //导入bus
export default {
methods: {
sendMsg(){
// 触发 绑定的 事件,并向外传递参数
bus.$emit('chuan', '借点钱')
}
}
}