组件的使用
传统开发存在的问题：
- 依赖关系混乱
- 代码复⽤率不⾼
在html中引用Vue.js来使⽤组件的三⼤步骤
1. 定义组件
2. 注册组件
3. 使⽤组件
1. 定义组件（创建组件）
使⽤Vue.extend(options)创建，其中options和new Vue（options）时传⼊的那个optins⼏乎⼀ 样，但也有区别 。
区别如下：
1）Vue.extend({})中，el不要写，为什么？-----最终所有的组件都要经过⼀个vm的管理，由vm中的el去决定服务于那 个容器
2）Vue.extend({})中，data必须写成函数，为什么？-----避免组件复⽤时，数据存在引⽤关系 注意：使⽤template可以配置组件结构
data必须写成函数的原因之一例子：
<script>
let obj1={
x:1,
}
let obj2=obj1;
obj2.x=222;
console.log(obj1)//x:222,浅拷贝
//————————————————————————————————————————————————————————————
let obj3={
x:2,
}
// 写成函数的原因
function data(){
return{
x:2,
}
}
obj4=data();
obj4.x=444;
console.log(obj3)//x:2,
console.log(obj4)//x:444,解决浅拷贝
</script>2. 注册组件
1）局部注册：靠new Vue的时候传⼊components选项
2）全局注册：靠Vue.component('组件名',组件)
3. 使⽤组件 编写组件标签
<body>
<div id="app">
<!-- 3、使用组件 局部使用 -->
<school></school>
<hr>
</div>
<div id="app2">
<!-- 不起作用 -->
<!-- <school></school> -->
<!-- 全局使用组件 -->
<student></student>
</div>
</body>
<script>
// 单文件组件的使用
// 1.创建组件
const student=Vue.extend({
// template语法展示内容，里面必须要有一个div容器
template:`
<div>
<h2>学生姓名:{{name}}</h2>
<h2>家庭地址:{{address}}</h2>
</div>
`,
// data必须是函数，并且返回的是对象
data(){
return{
name:"xilin",
address:'北京'
}
}
})
// 创建school组件
const school=Vue.extend({
template:`
<div>
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
<hr>
<h6>嵌套渲染内容</h6>
<h3><student></student></h3>
</div>`,
data(){
return{
name:'briup',
address:"广东"
}
},
// 注册school组件嵌套student组件
components:{
student,
}
});
new Vue({
el:"#app",
data:{
},
// 局部注册
components: {
school,
}
})
// 全局注册
Vue.component('student',student);
new Vue({
el:'#app2',
})
</script>
</html>
6329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
