组件注册相关
html部分：
<div id="app">
<hello-world></hello-world>
</div>
全局注册：
全局注册的组件可以在全局任意地方使用。
Vue.component('HelloWorld',hellWordd)
第一个参数是要使用的标签名，不管这里是大写或中线，在使用的时候都需要小写加中线。
第二个参数是组件的配置项。
局部注册：
只有当前实例才能使用这个组件，这里是components。
const app = new Vue({
el:'#app',
components:{
HelloWorld
}
})
配置组件：
大驼峰命名组件，实际上还是一个Vue实例。
const HelloWorld = {
template: '<div>how are you</div'
}
组件配置相关
data:
const HelloWorld = {
template: '<div>how are you</div',
data (){
return {}
}
}
组件的data必须是一个方法，return一个对象，因为这样才能保证每个组件的数据是独立的，而不是共享的
组件嵌套相关
配置组件时：
//被嵌套的组件
const HelloDeso = {
template: '<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed quia dolorem magnam deserunt corporis repellendus nam deleniti amet, consectetur ab facilis iusto ea! Dolorum animi omnis corporis maxime asperiores. Expedita.</div>'
}
const HelloWorld = {
//一个组件的template必须要有一个唯一的根元素
template: '<div><span>{{ msg }}</span><hello-deso> </hello-deos></div>',
//注册组件
components:{
HelloDeso
},
data (){
return {
msg:'who are you'
}
}
}
props
调用组件时，用来获取标签上的属性的值
html：
<div id="app">
<!-- 在调用这个组件的时候通过text属性绑定一个值，在组件内部就可以通过props来接收这个值 -->
<my-text :text="text1"></my-text>
<my-text text="world"></my-text>
<my-text text="!"></my-text>
</div>
js:
const MyText = {
template: '<span>{{text}}</span>',
// 通过props来接收调用的时候传过来的值。一旦接收了，就可以直接把props当data用，但是不能直接在内部修改props的值。这是基于单向数据流的原则的。
props: ['text']
}
const app = new Vue({
el: '#app',
data: {
text1: 'hello',
},
components: {
MyText
}
})
props的几种写法：
props:['x','y']
//可对传入的props进行类型的检测
props:{
x:Number,
y:Number
}
//如果要对传入的值进行更多的约束，还可以把传入值写成一个对象。
props:{
x:{
type:Number,//类型
required:true,//必传可选
default:0,//初始值
}
y:{
type:Number,
required:false,
default:0,
}
}
props的坑：
js中是驼峰命名法，接收时使用驼峰
props:['textContent']
而在html中时忽略大小的，如果写成驼峰，并不能被识取到，所有此时要使用中线连接
<hell text-content='hello word!'></hell>
单项数据流
所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来就不行。
例子：
<div id="app">
<!-- hello-text为app的data里的text值 -->
<!-- 当自定义事件被触发时，执行onChangeText方法 -->
<hello
:hello-text="text"
@change-text="onChangeText"
>
</hello>
</div>
const Hello = {
//用props获取的helloText来渲染
//当点击改文字button时执行changeHelloText方法
template: `<div>
{{ helloText }}
<button @click='changeHelloText'>
改文字
</button>
</div>`,
//获取hello标签上的hello-text的值
props: ['helloText'],
methods: {
changeHelloText () {
//不能写直接写 this.helloText = 'xxxx' 这是因为单向数据流的原因。
//要修改就找到data定义的地方
//this.$emit自定义一个事件，并把需要修改的值带上
//changeHelloText触发时，自定义事件也会触发
this.$emit('change-text','who are you')
}
}
}
const app = new Vue({
el:'#app',
data:{
text:"hello word"
},
methods:{
onChangeText (text) {
//改变text值
//text为自定义事件传的值
this.text = text
}
},
//组件注册
components:{
Hello
}
})
bus
同级组件要相互发生关系时，需要定义一个事件总线，事件总线什么都不渲染，只是一个空的实例。
//事件总线
const bus = new Vue()
//大哥
const Dage = {
//兄弟组件，不能直接通信，一种方式时告诉父级进行传递，一般不会这么做
//一种是通过事件总线完成
//点击呼叫二弟按钮后，执行jiaoerdi事件
template: `<div>
这是大哥
<button @click="jiaoerdi">
呼叫二弟
</button>
</div>`，
methods:{
jiaoerdi(){
//告诉bus，我发一个命令，叫hujiao
bus.$emit('hujiao')
}
}
}
//二哥
const Erge ={
//当ting为true时就显示 听见了
template:`<div>
这是二哥
<span v-if="ting">
{{daying}}
</span>
</div>`,
data () {
return {
daying:'听见了',
ting:false
}
}
//监听一下bus里的事件
created (){
//接收到bus里的hujiao命令时，改变this.ting的状态
bus.$on('hujiao',() => {
this.ting = true
})
}
}
const app = new Vue({
el:'#app',
//注册组件
components:{
Dage, //组件1
Erge //组件2
}
})
