全局注册组件
该组件名就是Vue.component的第一个参数。
当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如。
Vue.component('my-component-name', { /* ... */ })
当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说和都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
局部注册组件
通过一个普通的 JavaScript 对象来定义组件：
Vue.component('MyComponentName', { /* ... */ })
然后在components选项中定义你想要使用的组件：
var ComponentA = { /* ... */ }
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
}
})
下面是示例，代码复制可运行查看：如有错误之处还请指正，我会立即更改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>VUE</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1827109_5sbwuxueh69.css" />
<script src="../base/vue2.6.10.js"></script>
</head>
<body>
<template id="btns">
<button @click="btns_click()"><i :class="nun?zan:befuz"></i>{{nun}}</button>
</template>
<template id="list">
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</template>
<div id="app">
<btns></btns>
<list></list>
</div>
</body>
<script>
// 全局注册组件
Vue.component("btns", {
template: "#btns",
data: function () {
return {
nun: 10, //当前点赞数量
booers: false, //判断是否点赞
zan: ["iconfont iconzan", "btn_i"], //class类名
befuz: "iconfont iconzan", //class类名
};
},
methods: {
btns_click: function () {
if (!this.booers) this.nun++;
else this.nun--;
this.booers = !this.booers;
},
},
});
var vm = new Vue({
el: "#app",
data: {},
// 局部注册
components: {
list: {
template: "#list",
},
},
methods: {},
});
</script>
</html>
269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
