Vue自定义组件

最新推荐文章于 2024-07-20 14:39:34 发布

晓倾城

最新推荐文章于 2024-07-20 14:39:34 发布

阅读量226

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_40850266/article/details/119850983

版权

前端专栏收录该内容

34 篇文章 1 订阅

订阅专栏

<!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">
    <title>Hellovue</title>
    <script type="text/javascript" src="./js/vue.min.js"></script>
</head>

<body>
    <div id="app">
       <my-button></my-button>
    </div>
</body>
<script>
    //自定义组件
    Vue.component("my-button",{
    data:function(){
        return{
            count:0
        }
    },
    template:"<button @click='count++'>点击了{{count}}次</button>"
   })
    // vue对象实例
    var vm=new Vue({
        el:"#app",
        data:{
        }
    });
</script>
</html>

 //自定义组件
    Vue.component("1.自定义组件名称",{
    data:function(){
        return{
        2.组件数据模型
        }
    },
    template:"3.组件html"
   })

使用的时候使用组件名称作为标签放在父挂在区域中即可

<body>
    <div id="app">
       <my-button></my-button>
    </div>
</body>

当然自定义组件也可以定义方法，但是方法中的data需要使用this来获取。

 //自定义组件
    Vue.component("my-button",{
    data:function(){
        return{
            count:0
        }
    },
    methods:{
        heihei:function(){
            //获取data中的count需要使用this
            this.count++;
        }
    },
    template:"<button @click='heihei'>点击了{{count}}次</button>"
   })

需要注意：

自定义组件中的数据一定是一个函数
组件模板里面必须有一个根节点
如果组件层级结构很多可以使用模板字符串（反引号）
组件名称建议使用短横线连接 -

 data:function(){
        return{
            count:0
        }
    }

不能有同级别元素，如果有可以使用div当作根节点标签

template:"<button @click='heihei'>点击了{{count}}次</button>"

模板字符串
在这里插入图片描述

晓倾城

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录