Vue子组件给父组件传值 父组件给子组件传值 demo 示例代码
QQ技术交流群173683866 526474645 欢迎加入交流讨论，打广告的一律飞机票Vue子组件给父组件传值 需要使用自定义事件流程：1.子组件创建并监听自定义事件，2.在事件函数里面执行emit函数，通过emit把想传的值传给父组件3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数，在函数的参数中接收子组件传递的参数。效果图：实现代码：&...
·
QQ技术交流群 173683866 526474645 欢迎加入交流讨论，打广告的一律飞机票
Vue子组件给父组件传值 需要使用自定义事件
流程：
1.子组件创建并监听自定义事件，
2.在事件函数里面执行emit函数，通过emit把想传的值传给父组件
3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数，在函数的参数中接收子组件传递的参数。
效果图：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 父组件和子组件相互传值demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div id="counter-event-example">
<p>{{ total }}</p>
<!--这里使用了两个子组件，因为子组件的data是函数，所以它们的值互不影响-->
<!--父组件在使用子组件的地方直接用 v-on 来监听子组件触发的事件。-->
<button-counter v-bind:idx="1" v-on:increment="appAddCounter"></button-counter>
<button-counter v-bind:idx="2" v-on:increment="appAddCounter"></button-counter>
</div>
</div>
<script>
Vue.component('button-counter', {
//1.使用 $on(eventName)监听事件
template: '<button v-on:click="addCounter">第{{idx}}个子组件： {{ counter }}</button>',
props:['idx'],
data: function() {
return {
counter: 0
}
},
methods: {
//子组件的自定义事件
addCounter: function() {
this.counter += 1;
var str ='我是第'+this.idx+'个子组件,我的值为：'+this.counter;
//2.使用 $emit(eventName,obj) 触发事件
//increment: 是父组件指定的传数据绑定的函数，str: 子组件给父组件传递的数据
this.$emit('increment',str);
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
appAddCounter: function(e) {
console.log('子组件传的值：',e)
this.total += 1
}
}
})
</script>
</body>
</html>
前往低代码交流专区
更多推荐
3
0- 0
已为社区贡献38条内容
所有评论(0)