vue组件之间的通信
vue.js官网prop
(不谈vuex)
父–>子 props
prop是单向绑定
Prop 类型
String
Number
Boolean
Array
Object
Date
Function
Symbol
Prop 验证
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
propC: {
type: Number,
required: true, // 必填
default: 100 //带有默认值的数字
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
1 | **父组件代码** |
1 | **子组件代码** |
子–>父
子组件向父组件传递分为两种类型。
1、子组件改变父组件传递的props(你会发现通过props中的Object类型参数传输数据,可以通过子组件改变数据内容。这种方式是可行的,但是不推荐使用,因为官方定义prop是单向绑定)
2、通过$on和$emit
- 不推荐
父组建代码同上
1 | **子组件代码** |
- 通过$on,$emit
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28*通过$on,$emit*
**父组件代码**
<template>
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</template>
<script>
import ButtonCounter from './buttonCounter'
export default {
name: 'index',
components: {
'button-conuter': ButtonCounter
},
data () {
return {
total: 0
}
},
methods: {
incrementTotal (val) {
打印值分别是 val
this.total++
}
}
}
</script>
incrementTotal1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21**子组件代码**
<template>
<button @click="incrementCounter">{{counter}}</button>
</template>
<script>
export default {
name: 'button-counter',
data () {
return {
counter: 0
}
},
metheds: {
incrementCounter () {
// 可传额外参数 this.$emit('increment',this.counter, true);
this.$emit('increment')
this.counter++
}
}
}
</script>
非父子,比如兄弟组建
通过使用一个空的Vue实例作为中央事件总线,(这里也可以使用app实例,而不需要新建一个空Vue实例)
1 | **main.js** |
1 | **header组件传递给footer** |
1 | **footer组件** |
欢迎访问我的博客 地址
https://blog.afacode.top
广告
阿里云活动云服务器低至1核-2G-1M,1年89元,3年229。
2核-4G-3M,2年469元,3年799。
2核-8G-5M,3年899元。
新老客户都有优惠 点击查看详情/购买
腾讯云现在活动
1核 2G 1M 88一年
2核 4G 5M 3年只要998。 点击查看详情/购买