vue 组件 子向父亲通信用自定义方法用事件监听
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of page</title>
</head>
<body>
<div id="example">
<input v-model="parentsg">
<br>
<child v-bind:parentsg="parentsg"></child>
<!-- 直接绑定根数据text ,但是必须指明根数据的路径shou.text-->
<todo-item v-bind:todo="todo"></todo-item>
</div>
<div id="counter-event-example">
<p>{{childtofather}}</p>
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script >
// 注册
Vue.component('child', {
props: ['parentsg'],
template: '<span>{{ parentsg}}</span>'
})
Vue.component('todo-item', {
props: ['todo'],
template: '<p>{{todo.isComplete}}</p>'
})
// 创建根实例
new Vue({
el: '#example',
data:{
parentsg:'',
todo: {
text: 'Learn Vue',
isComplete: false
},
shou: {
text: 'shi wo ma',
isComplete: false
}
}
})
Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
// 绑定了事件click————>increment
// 然后 this.counter += 1; this.$emit('increment1',this.counter);
// 这边就是触发事件 increment1,参考文献里面有点乱,这边是不是清晰多了
// 然后 <button-counter v-on:increment1="incrementTotal"></button-counter>
// v-on相当于监听吧,就触发 incrementTotal
// 传给父组件的参数 输出// this.counter
// 有没有很清晰,若有理解不对的地方,请指正
methods: {
incrementCounter: function () {
this.counter += 1
this.$emit('increment',this.counter)
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0,
childtofather:''
},
methods: {
incrementTotal: function (e) {
this.total += 1;
//输出 this.counter
console.log(e)
//
this.childtofather=e +"子传父传来的数据"
}
}
})
</script>
</html>
相关文章
- vue 中新窗口打开vue页面 (this.$router.resolve)
- Vue 样式绑定、事件绑定
- 【Vue】通过text按键执行事件,并且获取到按键的名称和编码
- 几款实用的VUE移动端UI框架
- vue父组件触发子组件方法
- 说一下Vue组件中的自定义事件和全局事件总线
- Vue绑定事件,双向数据绑定,只是循环没那么简单
- vue+element Form键盘回车事件页面刷新解决
- vue城市选择组件
- vue--父组件向子组件传参--父组件定义v-bind:参数名--子组件接收props----子组件调用父组件的方法(子组件向父组件传参)父组件@事件名称--子组件接收this.$emit
- vue---向后台添加数据--删除数据--事件方法传参---在单页面配置url请求地址--暂时没有用到webpack
- VUE-015-解决 vue install 引发的 failed Error: not found: python2 问题
- 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)
- vue中安装及使用animate.css
- Django REST framework+Vue 打造生鲜超市(三)
- Vue学习第19天——vue脚手架配置代理
- Vue常见的事件修饰符