vue中的组件----组件定义
<title>vue中的组件</title>
<style>
.hello {
border-bottom: solid deeppink 0.05rem;
}
</style>
</head>
<body>
<!-- 3️⃣ -->
<template id="tpl">
<div>
<h3>三体人说:</h3>
<p>不要回复，不要回复，不要回复</p>
</div>
</template>
<div id="app">
<!-- 1️⃣2️⃣3️⃣ -->
<!-- 循环生成20遍
<hello v-for="i in 20" :key="i"></hello> -->
<hello></hello>
<xiaoming></xiaoming>
<santi-ren></santi-ren>
</div>
<script src="./libs/vue.js"></script>
<script>
// 1️⃣最简单的方式创建一个自定义组件, 局部组件,使用的时候需要进行注册
var hello = {
// 表示组件使用的模板内容
template: `<div class="hello">
<h1>我是一个自定义组件</h1>
<button @click="count++">我是一个按钮-{{count}}</button>
<p>{{msg}}</p>
</div>`,
// data表示组件中使用的数据，需要写成一个funciton，返回一个对象作为结果
/*
在之前学的vue中，data是个对象，
而在组件中为什么data必须是一个函数呢？
因为js里面对象叫做引用赋值
如果现在把data改成一个对象的形式
那这个data在组件在复用的时候
这个data就会出现一种所有被复用被重复使用的组件指向同一个内存空间，当修改一个，所有的都会被改变，但是如果通过function定义的话，function里面又会返回一个新的对象，这个时候每一个组件里的data都是一个唯一的对象，
*/
data() {
return {
msg: "我是一段话",
count: 1,
};
},
};
// 2️⃣此种方式定义的组件为全局组件,不需要注册可以直接使用
// 组件模板只能有一个根节点
Vue.component("xiaoming", {
template: "<div><h1>我是小明</h1><p>不要你觉得，我要我绝得</p></div>",
});
// 3️⃣
var santiRen = {
template: "#tpl", // 使用一个模板html的形式定义组件的模板内容
};
// 1️⃣ 3️⃣
new Vue({
el: "#app",
components: {
// 组件注册,我们定义的局部组件需要注册之后才能使用
hello, // hello: hello
santiRen, // 在页面中使用的时候需要把大写字母转成小写，中间使用-分割
},
});
</script>
</body>
8668
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
