Vue组件自定义事件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><script src="js/vue.js"></script><title>Vue组件</title></head><body><div id="d1"><p>{{total}}</p><button-incre v-on:increment="incrementTotal"></button-incre><button-incre v-on:increment="incrementTotal"></button-incre><button-incre v-on:increment="incrementTotal"></button-incre><button-incre v-on:increment="incrementTotal"></button-incre></div><script>Vue.component("button-incre",{template:"<button v-on:click='incrementHandle'>{{counter}}</button>",data:function(){return {counter:0}},methods:{incrementHandle:function(){this.counter+=1;this.$emit("increment");}}})new Vue({el:"#d1",data:{total:0},methods:{incrementTotal:function(){this.total+=1;}}})</script></body>
</html>

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><script src="js/vue.js"></script><title>Vue组件的使用</title><style>.base{background: limegreen;text-align: center;}.active{color: orangered;}</style></head><body><div id="app"><fieldset><h3>我是父组件</h3><Son></Son><Son2></Son2><Son3></Son3></fieldset></div><script>Vue.component("Son",{template:"<p v-bind:class='classObj'>我是子组件1</p>",data:function(){return {classObj:{base:true,active:true}}}})Vue.component("Son2",{template:"<p v-bind:class='classObj'>我是子组件2</p>",data:function(){return {classObj:{base:true,active:false}}}})Vue.component("Son3",{template:"<p v-bind:class='classObj'>我是子组件3</p>",data:function(){return {classObj:{base:false,active:true}}}})new Vue({el:"#app"})</script></body>
</html>

Vue组件自定义事件相关推荐

Vue组件学习之组件自定义事件
主要介绍组件的自定义事件的概念,使用等. 何为组件自定义事件: 组件自定义事件是一种组件间的通信方式,方向是子组件====>父组件. 使用场景:A是子组件,B是父组件,如果要把B的数据传给A, ...
Vue之组件自定义事件的绑定和解绑
不知道小伙伴们还记不记得在用 Vue 构建 TodoList 案例的博客中,我们有涉及到要从子组件中把数据传递给父组件,当时我用的方法是,让父组件给子组件传递一个函数,然后子组件把要传过来的数据放在那 ...
vue：组件自定义事件、绑定、解绑事件
vue:组件自定义事件.绑定.解绑事件自定义组件绑定事件: 使用方法:在引入组件中的methods定义一个回调方法,在组件标签中使用如下两种方式自定义事件,去到引入的组件的中,使用 this.$em ...
Vue2（九）：浏览器本地存储、组件自定义事件、TodoList自定义事件
Vue2学习笔记:第九章一.浏览器本地存储(WebStorage) 1.相关API 2.一些注意点 3.TodoList中的本地存储二.组件自定义事件 1.引出组件自定义事件 2.怎么给组件绑定? ...
vue组件自定义v-model
转载自 vue组件,自定义v-model方法 1 <my-component v-model="obj"></my-component> 在使用my-co ...
[Vue]组件——通过$emit为组件自定义事件
1.在定义组件时调用内建的 $emit 方法并传入事件的名字,来向父级组件触发一个事件enlarge-text: Vue.component('blog-post', {props: ['post'] ...
Vue.js 自定义事件
事件名不同于组件和 prop,事件名不存在任何自动化的大小写转换.而是触发的事件名需要完全匹配监听这个事件所用的名称.举个例子,如果触发一个 camelCase 名字的事件: this.$emit( ...
【踩坑日记】Vue组件@click事件点击没有反应
项目场景: 在自定义组件上绑定@click事件无法触发问题描述: 在自定义组件上绑定@click事件无法触发 <template><div>自定义组件<div> ...
Vue 组件，事件，循环，父子传值，非组件传值 vuex
<template> <div> <button @click="changebnt(1)">第一项</button> ...

Vue组件自定义事件

Vue组件自定义事件相关推荐

最新文章

热门文章