vue之自定义组件

最新推荐文章于 2024-05-10 12:27:58 发布

VJDSG

最新推荐文章于 2024-05-10 12:27:58 发布

阅读量347

点赞数 2

分类专栏： vue 笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_45155436/article/details/121666786

版权

vue 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

笔记

1 篇文章 0 订阅

订阅专栏

vue之自定义组件

一、组件命名的方式

kebab-case，单词之间采用 - （短横线）连接
PascalCase，驼峰式名称，单词之间，首字母大写，例如：MyComponent，但是在DOM中使用时，必须更改为，，是识别不了的，因为HTML对大小写不敏感。

二、组件的基本使用

1、模板

通过 Vue.component(‘自定义组件名字’,{

data:function(){

return{

数据名字:值,

}

},

methods: {

},

template:自定义模板

})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button-counter></button-counter><br>
    <button-counter></button-counter>
</div>

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    //这里定义的是全局组件
    //定义一个名为button-counter的新组件
    Vue.component('button-counter',{
        data:function () {//在自定义组件中data是一个方法，且以return返回
            return {
                count:0
            }
        },
        methods: {
            handle:function () {
                this.count++;
            }
        },
        //定义组件模板(每次点击count自加1)
        template: '<button v-on:click="handle">{{count}}次</button>'
    });

    var app = new Vue({
        el:'#app',
        data:{

        },
        methods:{

        }
    })

</script>

</body>
</html>

2、注意事项

自定义组件的data必须是一个函数，返回一个对象作为组件的数据，其本质一个闭包，让各个组件的数据相互独立。
组件的模板内容必须是单个根元素。

正确

template: `
            <div>
                <button v-on:click="handle">{{count}}次</button>
                <button>测试按钮</button>
                <HelloWorld></HelloWorld>
            </div>`

错误

template: `  
                <button v-on:click="handle">{{count}}次</button>
                <button>测试按钮</button>
                <HelloWorld></HelloWorld>
         `