组件的使用
传统开发存在的问题：
在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>
|