分类:
Vue.js
@{
ViewBag.Title = "Index5";
}
@*主键*@
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id="content">
<btn @@Myclick="Youclick">1</btn>
<btn>2</btn>
<btn>3</btn>
</div>
<script>
//自定义一个组件
//btn 是自己定义的名字
Vue.component("btn",{
data: function () {
return {
count:1
}
},
//插槽 <slot></slot> 它的位置在哪在该组件的内容就在那
template: "<div><button @@click='ckicke'>按钮{{count}}</button><slot></slot></div>",
methods: {
ckicke: function () {
this.count++;
// this.$emit("自定义事件名称");在外面就可以直接使用
//如上面的btn1的事件
this.$emit("Myclick");
},
}
})
//实例化一个vue
var vm = new Vue({
//el通过控制该标签就可以改变该标签里面全部的数据
el: "#content",
data: {
msg: "hello vue.js"
},
methods: {
Youclick:function () {
alert("2542452")
}
}
})
</script>
评价
