自定义一个ButtonCounter.js组件
export default {
data() {
return {
count: 0
}
},
template: `
<van-button type="primary" @click="count++">
You clicked me {{ count }} times.
</van-button>`
}
按照官网文档的意思,组件命名需要大写驼峰命名。或者使用kebaba-case方式。但是MVC只支持kebaba-case
如果我们使用PascalCase方式命名来导入自定义组件
<script type="module">
import reclick from '../../js/reclick.js';
import ButtonCounter from "../../js/components/ButtonCounter.js";
const app = Vue.createApp({
// components: {
// buttoncounter
// },
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
}
},
template: '#app-template'
})
app.use(ElementPlus)
app.use(vant)
app.use(vant.Lazyload)
//自定义组件
app.component('ButtonCounter', ButtonCounter)
// 调用工具函数,弹出一个 Toast
// vant.showToast('提示');
// app.directive('focus', {
// mounted: (el, binding, vnode, prevNode) => {
// el.addEventListener('click', e => {
// if (!el.disabled) {
// el.disabled = true;
// el.style.cursor = 'not-allowed';
// el.classList.add('is-disabled');
// setTimeout(() => {
// el.disabled = false;
// el.style.cursor = 'pointer';
// el.classList.remove('is-disabled');
// }, binding.value || 1000);
// }
// });
// }
// }); //自定义指令
app.directive('reclick', reclick
); //自定义指令
app.mount('#app')
</script>
<template id="app-template">
<el-button v-reclick="20000" type="primary" @@click="increment">按钮</el-button>
<h1>Count:{{count}}</h1>
<ButtonCounter />
</template>
这样的方式引入组件并在页面中使用,什么都不会显示,并且F12会有警告
提示组件失败,并且组件名称默认是小写。既然默认是小写那我们使用kebaba-case命名方式试试。
export default {
name: 'vant-my-button',
data() {
return {
count: 0
}
},
template: `
<van-button type="primary" @click="count++">
You clicked me {{ count }} times.
</van-button>`
}
组件里面给组件name赋值。
然后使用组件
import ButtonCounter from "../../js/components/ButtonCounter.js";
//自定义组件
app.component('vant-my-button', ButtonCounter )
<template id="app-template">
<el-button v-reclick="20000" type="primary" @@click="increment">按钮</el-button>
<h1>Count:{{count}}</h1>
<vant-my-button></vant-my-button>
<vant-my-button></vant-my-button>
<vant-my-button></vant-my-button>
</template>
运行后,组件完美加载出来。
注意,vue如果挂载了template ,那么组件请写在template 中,如果写在外面也出不来。