<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义事件</title>
</head>
<body>
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
<!-- //我们看到这里放了2个button-counter组件，他们是互相独立的。这里我们调用了v-on:increment="incrementTotal"侦听，它侦听到组件内部事件后将会执行父级实例的incrementTotal方法。 -->
<!-- </body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
//组件里我们看到定义了一个计数器，还有一个计数器方法increment，模板中有一个点击事件触发increment。
//最关键的是this.$emit('increment')，我们看到在increment方法中定义了一个increment事件，这个事件将会传到组件外部乃至上级。
</script>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义事件</title>
</head>
<body>
<div id="v-model-example">
<p>{{ message }}</p>
<my-input label='请写入' v-bind:value="message" v-on:input="message = arguments[0]"></my-input>
<!-- = arguments[0]相当于v-model="message" 绑定message 使p标签内容和input同步-->
</div>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
Vue.component('my-input', {
template: '
<div class="form-group">
<label v-bind:for="randomId">{{label}}:</label>
<input v-bind:id="randomId" v-bind:value="value" v-on:input="onInput">
</div>
',
props: ['value', 'label'],
data: function () {
return {
randomId: 'input-' + Math.random() //randomId 为 input+一个随机数
}
},
methods: {
onInput: function (event) {
this.$emit('input', event.target.value) //获取当前触发对象的值
}
},
})
new Vue({
el: '#v-model-example',
data: {
message: 'hello',
}
})
</script>
<!--
侦听事件使用 $on(eventName)
定义和触发事件使用 $emit(eventName) -->
</html>
二次视频学习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例事件</title>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
</head>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<p><button @click="add">add</button></p>
</div>
<p><button onclick="reduce()">jian</button></p>
<p><button onclick="reduceOnce()">jian</button></p>
<p><button onclick="off()">off</button></p>
</body>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
num:1,
},
methods:{
add:function(){
this.num++;
}
}
});
app.$on('reduce',function(){ //监听当前实例上的自定义事件。 $on在构造器外面添加事件 接收两个参数，第一个是调用时的事件名称，第二个是一个匿名方法 如果按钮在作用域外部，可以用$emit 执行
console.log('执行了reduce方法');
this.num--;
});
app.$once('reduceOnceaaa',function(){ //$once 执行一次的事件
console.log('只执行一次的方法');
this.num--;
})
function reduce(){
app.$emit('reduce'); //触发当前实例上的事件。附加参数都会传给监听器回调。 调用上面定义的$on
}
function reduceOnce(){ //执行一次的事件
app.$emit('reduceOnceaaa');//运行上面定义的
}
function off(){ //关闭事件
app.$off('reduce'); //
}
//
</script>
</html>