tnblog
首页
视频
资源
登录

Vue.js 组件

4094人阅读 2021/5/19 10:35 总访问:92767 评论:0 收藏:1 手机
分类: 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>
评价
.
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术