最近学了vue的组件间的传值，通过
模板语法文档
，再结合生活的例子，写下此篇博客，敬请评论留言指导！
一、父组件给子组件传值
<body>
//父
<div id="app">
<my-content test = "测试"/> //---①
</div>
</body>
//子
<template id="content">
<div>
我这里是内容区域 --- {{ test }} //---③
</div>
</template>
js代码:
const Content = {
template: '#content',
props: ['test'] //---②
}
new Vue({
el: '#app',
data: {},
components: {
'my-content': Content
}
})
在这个例子当中：①父组件在调用子组件的地方添加一个自定义的属性，其中属性的值就是要传递给子组件的值(’‘测试’’)；
②在子组件定义的地方添加一个选项props,
const Content = { props : }
props的值可以为数组可以是对象。
如果是数组，元素就是父组件中自定义的属性名 ‘test’；
③在子组件中就可以通过 {
{ test }} 得到父组件传递过来的数据。
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。
实现效果：
我这里是内容区域 — 测试
<body>
<div id="app">
<my-content test = "测试" :count="100" :flag="true" :tip="tip"/>
</div>
</body>
<template id="content">
<div>
我这里是内容区域 --- {{ test }} -- {{ count }} --- {{ flag }} --- {{ tip }}
</div>
</template>
//js
const Content = {
template: '#content',
props: ['test', 'count', 'flag', 'tip']
}
new Vue({
el: '#app',
data: {
tip: '提示'
},
components: {
'my-content': Content
}
})
这个例子中props的值是多数组，和上面的写法相同。
需要注意父元素在调用子组件时添加的自定义的属性的值。
如果属性的值是number类型，boolean类型，或者是变量，需要使用到绑定属性
<body>
<div id="app">
<my-content test = "测试" :count="100" :flag="true" :tip="tip"/>
</div>
</body>
<template id="content">
<div>
我这里是内容区域 --- {{ test }} -- {{ count }} --- {{ flag }} --- {{ tip }}
</div>
</template>
//js
const Content = {
template: '#content',
//props为对象的第一种写法√√√√√√√√√√√√√√√√√√√
props: {
test: String,
count: Number,
flag: Boolean,
tip: String
}
//props为对象的第二种写法√√√√√√√√√√√√√√√√
props: {
test: {
type:String,
default:'测试数据' //如果父组件有test这个属性，就用父组件的值，如果没有，就用这个默认值
},
count: {
type: Number,
default:'123'
},
flag: {
type:Boolean,
default:'true'
}
}
}
new Vue({
el: '#app',
data: {
tip: '提示'
},
components: {
'my-content': Content
}
})
√√√props为对象的第一种写法：验证传递数据的有效性 —- 可能父子组件不是一个人写的，如果数据类型不对，会报出警告，可以及时调整。
√√√props为对象的第二种写法：既要验证数据的类型，又要设定属性的默认值，如果默认值是对象或者是数组，值为一个函数。
vm.$emit( eventName, […args] )
参数：
{string} eventName
[…args]
触发当前实例上的事件。附加参数都会传给监听器回调。
实现效果：
我这里是内容区域 — 测试数据了 – — —
二、子组件给父组件传值
<body>
<div id="app">
<my-content @myevent="getData"/> //-------①
</div>
</body>
<template id="content">
<div>
我这里是内容区域
</div>
</template>
//js
const Content = {
template: '#content',
mounted () {
this.$emit('myevent', 10000) //---③
}
}
new Vue({
el: '#app',
data: {},
methods: {
getData (val) { // val为从子组件中获取到的值 //---②
console.log(val)
}
},
components: {
'my-content': Content
}
})
子继承父比较好继承，而父继承子需要定义事件，可以类比生活中的例子。水往低处流是自然状态下的，而想要水向上流，就需要借助工具，比如水泵，利用水泵来抽水的例子。
①父组件调用子组件的地方，给他绑定一个自定义的事件, 事件不要加（）
<my-content @myevent=“getData”/>
②在父组件选项methods中实现此事件，默认参数为你将从子组件得到的值
methods: {
getData (val) { // val为从子组件中获取到的值
console.log(val)
}
},
③在子组件中，可以是生命周期钩子函数，也可以是组件自己的事件 去 触发 父组件中的自定义事件
this.$emit(‘myevent’, 10000)
实现效果：
我这里是内容区域
三、非父子组件传值
<body>
<div id="app">
<my-list></my-list>
<my-count></my-count>
</div>
</body>
<template id="list">
<ul>
<li>111<button @click="add">+1</button></li>
<li>222<button @click="add">+1</button></li>
<li>333<button @click="add">+1</button></li>
<li>444<button @click="add">+1</button></li>
<li>555<button @click="add">+1</button></li>
</ul>
</template>
<template id="count">
<div>
总量是：{{ num }}
</div>
</template>
js代码：
const bus = new Vue()
const List = {
template: '#list',
methods: {
add () {
bus.$emit('count-event', 1)
}
}
}
const Count = {
template: '#count',
data () {
return {
num: 0
}
},
mounted () { // 一般情况下接收都使用 生命周期钩子函数
bus.$on('count-event', (val) => { // 此处一定要注意this指向，可以使用 =>
console.log(val)
this.num += val
})
}
}
new Vue({
el: '#app',
components: {
'my-list': List,
'my-count': Count
}
})
非父子组件传值也称为是兄弟组件传值，可以理解为生活中邮差与信的关系。通过一个中央事件总线传值。
先要确保 收信 的人是存在的，然后写信的人 写信 给邮差，邮差给送。
1.const bus = new Vue()
2.在接收端通过 bus.$on(‘收信信号’， function (val) {}）//——–此处一定要注意this指向，可以使用 => （箭头函数）
3.在发送端通过 bus.$emit(‘收信信号’, val)
实现效果： （每点击按钮+1，总量也会累积+1，可以应用到购物车的结算功能）
（这是一个简略效果，详情可以利用以上代码实现哦）
111 +1
222 +1
333 +1
444 +1
555 +1
总量是：6
程序来源于生活，终将归于生活。用一些生活中的例子更能理解程序。