子父传参
转自：https://blog.csdn.net/m0_37068028/article/details/72898119
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用，改用$emit,$on
vm.$on( event, callback )
监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$emit( event, […args] )
触发当前实例上的事件。附加参数都会传给监听器回调。
例子：
//父组件
<template>
<ratingselect @select-type="onSelectType"></ratingselect>
</template>
<script>
data () {
return {
selectType: 0,
},
methods: {
onSelectType (type) {
this.selectType = type
}
}
</script>父组件使用@select-type="onSelectType"监听由子组件vm.$emit触发的事件，通过onSelectType()接受从子组件传递过来的数据，通知父组件数据改变了。
// 子组件
<template>
<div>
<span @click="select(0, $event)" :class="{'active': selectType===0}"></span>
<span @click="select(1, $event)" :class="{'active': selectType===1}"></span>
<span @click="select(2, $event)" :class="{'active': selectType===2}"></span>
</div>
</template>
<script>
data () {
return {
selectType: 0,
},
methods: {
select (type, event) {
this.selectType = type
this.$emit('select-type', type)
}
}
</script>子组件通过$emit来触发事件，将参数传递出去。
父子传参
转自：https://www.cnblogs.com/ygtq-island/p/6864477.html
先定义一个子组件，在组件中注册props
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<template>
<div>
<div>{{message}}(子组件)</div>
</div>
</template>
<script>
export
default
{
props: {
message: String
//定义传值的类型<br> }
}
</script>
<style>
</style>
|
在父组件中，引入子组件，并传入子组件内需要的值
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<template>
<div>
<div>父组件</div>
<child :message=
"parentMsg"
></child>
</div>
</template>
<script>
import child
from
'./child'
//引入child组件
export
default
{
data() {
return
{
parentMsg:
'a message from parent'
//在data中定义需要传入的值
}
},
components: {
child
}
}
</script>
<style>
</style>
|
这种方式只能由父向子传递，子组件不能更新父组件内的data
在组件上使用v-model（双向传参）
来自官网上的解释：
自定义事件可以用于创建支持v-model的自定义输入组件。
但是首先我们得记住之前的v-model的解释，也就是
<input v-model="searchText">
等价于
<custominput v-bind:value="searchText" v-on:input="searchText=$event"> </custominput>
为了能够使它正常工作，这个组件内的<input>必须：1、将其value特性绑定到一个名为value的prop上； 2
在其input事件被出发的时候，将新的值通过自定义的input时间抛出！
故要写出如下代码：
Vue.component('custom-input',{
props:['value'],
template:`
<input v-bind:value="value"
v-on:input="$emit('input',$event.target.value)">
`
})
现在v-model就可以在组件上完美地工作起来
<custom-inpu v-model="searchText"></custome-input>
下面来一个朋友应用的例子：
自定义组件sidebar,要实现
<sidebar v-model="active"></sidebar>
父组件满足条件：data里面要有active元素
子组件满足条件：1、类似于父子单向传参，子组件中要有props名为value
2、类似于子父传参，（在子组件中设置active数据（只是个人用）），在子组件中进行监听
参数传入： value(val) {
if(val) {
this.active = val console.log("val") console.log(val) } }, 参数传出： active(val) { this.$emit('input', val) }嘻嘻嘻可以在正常使用啦，以后再用还会进行其他优化