Vue 学习笔记-2022/12/07
一、如何创建组件
const app = Vue.createApp({});
app.component("WordCount", {
data() {
return {
content: "",
};
},
computed: {
count() {
return this.content.length;
},
},
template: `
你共输入了 {{ count }} 个字符
`,
});
const vm = app.mount("#app");
如何创建组件
二、如何创建全局组件
const app = Vue.createApp({});
app.component("WordCount", {
data() {
return {
content: "",
};
},
computed: {
count() {
return this.content.length;
},
},
template: `
你共输入了 {{ count }} 个字符
`,
});
app.component("WordCountApp", {
template: `字符统计应用
`,
});
const vm = app.mount("#app");
三、局部组件注册
需要在对应的组件里面导出 JS 对象
然后再 index.js 导入对应的组件
// ComponentA.js
// 导出
export default {
template: `我是组件 A
`,
};
// 导入
import ComponentA from "./components/ComponentA.js";
const app = Vue.createApp({
components: {
ComponentA, // 等价于 ComponentA: ComponentA
ComponentC,
},
});
const vm = app.mount("#app");
此处评论已关闭