<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- //使用组件 -->
<handsome></handsome>
<component2></component2>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// 局部组件 使用的三部曲：1、创建这个组件 2、注册这个组件 3、引用这个组件
//组件是相互独立的 不能直接跨作用域 实例也是一个组件 实例拥有生命周期函数 所以组件也拥有生命周期函数
let obj={school:'zfpx'};//组件共用数据的情况
//注意：如果组件共用了数据 会导致同时更新（不符合独立性）
//子组件不能直接使用父组件的数据（组件间的数据交互）
//组件理论上可以无限嵌套
//创建组件
let handsome={
// 自己的模板可以用自己的data
template:'<div>哈哈哈哈哈哈哈{{school}}</div>',
data(){
return obj
}
}
let component2={
// 这里的引号问题可以用es6的模板字符串用``来包裹
// 点击自定义的标签 school的值变成hello
// 但是我们发现 由于obj这个数据是共享的 所以改变了一个的同时 下一个也会改变
// 这就不符合组件独立性的性质了
template:`<div @click="fn">组件2{{school}}</div>`,
data(){ //!!!!!注意这里的data要是函数 这里为什么data要是函数的原因 因为函数在
return obj //调用的时候可以返回对象 由于返回的对象的地址不同 所以可以让组件独立
},
methods:{
fn(){
this.school='hello'
}
}
}
let vm=new Vue({
el:'#app',
components:{//注册这个组件
handsome:handsome,//在es6中名字一样可以写一个,
component2
},
data:{
a:1
}
})
</script>
</body>
</html>