您的位置：首页 > 产品设计 > UI/UE

vue组件简单案例

2017-11-28 16:36 288 查看

<body>

<div id = 'app'>

<div>
<h3>正常按钮</h3>
<p><button @click = 'm_test_click'>点击</button></p>
</div>
<hr>
<div>

<h3>组件按钮</h3>

<p>{{ total }}</p>

<p><button-counter v-on:increment1="incrementTotal1" text = '点击' wtext = '点击中...'></button-counter></p>

<p><button-counter v-on:increment2="incrementTotal2" text = '点击' wtext = '点击中...'></button-counter></p>

</div>

</div>

<template id = 'button-counter'>
<div>
<button @click="increment">{{show_text}}{{ counter }}</button>
</div>
</template>

<script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>
<script type="text/javascript">

Vue.component('button-counter', {

template: '#button-counter',

// 用props传递数据
props : {
name : String,
text : String,
wtext : String,
onclick : Function,
onreset : Function
},

data: function () {
return {
// show_text : '点击',
show_text : this.text,  //要加props属性，不然拿不到this.text的值
counter: 0
}
},

methods: {
increment: function () {

this.counter += 1;

/**
*  触发自定义increment1的函数。
*  此处的increment1函数就是incrementTotal1函数。
*/
this.$emit('increment1',"这个位子是可以加参数的");

this.$emit('increment2');
}
},
}) ;

var _vm = new Vue({
data : {
total: 0
},
methods : {
m_test_click : function(){
alert('点击了正常按钮') ;
},
incrementTotal1: function (e) {
this.total += 1;
console.log(e);
},

incrementTotal2: function (e) {
this.total += 1;
console.log(e) ;
}
}
}).$mount('#app');

</script>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue 组件

相关文章推荐

新的分享

章节导航