Vue事件总线、组件之间的传值
父组件向子组件传值(1)第一个就是要明白怎么在父页面中向子组件中传值?你可以给子组件传入一个静态的值:但我们一般都是需要传动态的值,所以需要v-bind绑定:当然,你传的值可以是数字、对象、数组等等,参见vue官网(2)第二个就是要知道如何在子组件中接受父页面传过来的值,有几点需要了解:组件实例的作用域是孤立的;子组件要显式的用props选项声明它预期的数据,如:// 某个子...
父组件向子组件传值
(1)第一个就是要明白怎么在父页面中向子组件中传值?
你可以给子组件传入一个静态的值:
但我们一般都是需要传动态的值,所以需要v-bind绑定:
当然,你传的值可以是数字、对象、数组等等,参见vue官网
(2)第二个就是要知道如何在子组件中接受父页面传过来的值,有几点需要了解:
组件实例的作用域是孤立的;
子组件要显式的用props选项声明它预期的数据,如:
// 某个子组件中:
export default {
props: {
title: {
type: String,
default: 'hello world'
}
}
}
以上就是单向数据流的一般表现了: 父级 prop 的更新会向下流动到子组件中,但是反过来则不行。
子组件向父组件传值
那么我们延伸一下,子组件怎么向父组件传值?(1)基本概念
在Vue中,父子组件的关系可以总结为prop向下传递,事件向上传递。父组件通过prop给子组件下发数据,子组件通过事件给父组件发送信息
每个Vue实例都实现了事件接口:使用
o
n
(
e
v
n
t
N
a
m
e
)
监
听
事
件
;
使
用
on(evntName)监听事件;使用
on(evntName)监听事件;使用emit(eventName,optionalPayload)触发事件。另外,父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。
(2)举例说明:
父组件在组件上定义了一个自定义事件childFn,事件名为parentFn用于接受子组件传过来的message值<!-- 父组件 -->
<template>
<div class="test">
<test-com @childFn="parentFn"></test-com>
<br/>
子组件传来的值 : {{message}}
</div>
</template>
<script>
export default {
// ...
data: {
message: ''
},
methods: {
parentFn(payload) {
this.message = payload;
}
}
}
</script>
子组件是一个buttton按钮,并为其添加了一个click事件,当点击的时候使用$emit()触发事件,把message传给父组件。
<!-- 子组件 -->
<template>
<div class="testCom">
<input type="text" v-model="message" />
<button @click="click">Send</button>
</div>
</template>
<script>
export default {
// ...
data() {
return {
// 默认
message: '我是来自子组件的消息'
}
},
methods: {
click() {
this.$emit('childFn', this.message);
}
}
}
这样我们就基本实现了子组件向父组件发送值了。
vue中组件就是一个对象
template:表示组件使用的模板,只能有一个根节点
components注册一个局部组件
Vue.component('myCom2', {
template: '<h3>这是直接用 Vue.component 创建出来的组件</h3>',
});
//<my-com2></my-com2>
什么是事件总线?
在vue开发中我们通过new关键字创建一个空白的vue实例,所有的事件派发和监听都通过此实例进行。
实现全局事件总线对象的几种方式
1.大概思路是 :在main.js,也就是入口文件中,我们在vue的原型上添加一个bus对象;
下面的组件A和组件B可以是项目中任意两个组件
//在mian.js中
Vue.prototype.bus = new Vue() //这样我们就实现了全局的事件总线对象
//组件A中,监听事件
this.bus.$on('updata', function(data) {
console.log(data) //data就是触发updata事件带过来的数据
})
//组件B中,触发事件
this.bus.$emit('updata', data) //data就是触发updata事件要带走的数据
2.大概的实现思路: 新建一个bus.js文件, 在这个文件里实例化一下vue;然后在组件A和组件B中分别引入这个bus.js文件,将事件监听和事件触发都挂到bus.js这个实例上,这样就可以实现全局的监听与触发了
bus.js文件
// bus.js文件
import Vue from 'vue'
export default new Vue()
组件A
// 组件A ,监听事件send
<template>
<div>
<span>{{name}}</span>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
name: ''
}
},
created() {
let _this = this
// 用$on监听事件并接受数据
Bus.$on('send', (data) => {
_this.name = data
console.log(data)
})
},
methods: {}
}
</script>
组件B
// 组件B, 触发事件send
<template>
<div>
<input type="button" value="点击触发" @click="onClick">
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
elValue: '我是B组件数据'
}
},
methods: {
// 发送数据
onClick() {
Bus.$emit('send', this.elValue)
}
}
}
</script>
参考学习
更多推荐
所有评论(0)