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>
         `

命名：建议使用短横线命名，因为驼峰命名规则在组件模板字符串中会识别，但作为普通标签使用是不识别。

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