组件的各种类型及案例

组件的类型

Vue.component(组建名称, 组件的配置)
在组件中使用components的配置项来表示
问题：
组件命名问题

组件命名和html原生标签冲突 Header Footer ----> header footer
大驼峰的写法

Vue.componennt('ZhangJun',{
template: '<div></div>'
})

<div id = "app">
<!-- <ZhangJun></ZhangJun> 错的-->
<zhang-jun></zhang-jun>
</div>

.box{
background-color: red
}

box.style.backgroundColor = 'red'

组件通信

注意：组件通信，无论效果是如何的， Vue都是单向数据流（组件之间的数据通信）

父子组件通信

绑定的是简单类型数据

父组件中定义数据，通过单向数据绑定的形式，将数据绑定在子组件身上，属性是自定义属性，
子组件通过配置项中的props接收数据， props可以是一个数组，数组中放的是自定义属性名称
那么这个自定义属性可以向data中的数据一样直接在子组件模板中使用
父组件中数据一旦修改，子组件数据就会修改，那么这也就是单项数据流
子父通信（效果上像，间接的使用了父组件的东西）【不推荐大家使用】

eg:HTML部分

<body>
<div id="app">
<Father></Father>
</div>
<template id="Father">
<div class="father_box">
<h3>骏仔</h3>
<Son v-bind:money='money'></Son>
<!-- <Son :money='money'></Son> -->
</div>
</template>
<template id="Son">
<div id="Son_box">
<p>骏仔今天洗了:{{money}}次脚</p>
</div>
</template>
</body>

js部分

<script>
Vue.component('Father',{
template: '#Father',
data(){
return {
money:1000
}
}
})
Vue.component('Son',{
template:'#Son',
props:['money']
})
new Vue({
el:'#app',
})
</script>

绑定复杂数据类型 --------

父组件中的数据是一复杂数据类型，那么父组件绑定数据的时候，给子组件的是一个引用地址
子组件可以通过这个引用地址，修改这个数据
效果上像，子组件和父组件通信了，违背单项数据流

eg:HTML部分

<body>
<div id="app">
<Father/>
</div>
<template id="father">
<div id="father_box">
<h3>Father</h3>
<p>我现在有: {{sifangqian.money}}元</p>
<son :sifangqian='sifangqian'> </son>
</div>
</template>
<template id="son">
<div id="son_box">
<h3>Son</h3>
<input type="text" v-model='sifangqian.money'>
<p>我爸给了我:{{sifangqian.money}}元</p>
</div>
</template>
</body>

js部分


<script>
Vue.component('father',{
template:'#father',
data(){
return {
sifangqian: {
money:1000
}}
}
})
Vue.component('son',{
template:'#son',
props:['sifangqian']
})
new Vue({
el:'#app',
})
</script>

父组件可以传递一个方法给子组件

父组件定义方法，然后将这个方法通过单向数据绑定的形式传递给子组件
子组件通过props属性接收，然后通过 @click = “方法名”

eg:HTML

<body>
<div id="app">
<king></king>
</div>
<template id="king">
<div id="king_box">
<h3>我是秦始皇 </h3>
<p>支付宝到账:{{gk}}元!!!</p>
<people @get="get"></people>
</div>
</template>
<template id="people">
<div id="people_box">
<h3>我是农民</h3>
<button @click="give">就算死也不打钱!</button>
</div>
</template>
</body>

js部分

<script>
Vue.component('King',{
template:'#king',
data(){
return{
gk:0
}
},
methods:{
get(value){
this.gk +=value
}
}
})
Vue.component('People',{
template:'#people',
data(){
return{
money:2000
}
},
methods:{
give(){
this.$emit('get',this.money/2)
}
}
})
new Vue({
el:'#app',
})
</script>

通过自定义事件来实现通信

父组件中定义数据和方法（方法时用来操作数据的）
在子组件身上绑定自定义事件
子组件定义方法，在这个方法中通过 this.$emit(eventType,实际参数) 来调用自定义事件的事件处理程序

<!-- html结构代码 -->
<div id="app">
<King></King>
</div>
<template id="king">
<div>
<h3> I am king </h3>
<!-- <People v-on: get = "get"></People> -->
<p> 国库中有：{{ gk }} 钱 </p>
<People @get = "get"></People>
</div>
</template>
<template id="people">
<div>
<h3> I am people </h3>
<button @click = "give"> 交钱 </button>
</div>
</template>

<!-- js代码 -->
Vue.component('King',{
template: '#king',
data () {
return {
gk: 0
}
},
methods: {
get( value ){
this.gk += value
}
}
})
Vue.component('people',{
template: '#people',
data () {
return {
money: 2000
}
},
methods: {
give () {
this.$emit('get', this.money/2)
}
}
})
new Vue({
el: '#app'
})

非父子组件通信

使用ref来绑定组件，（注意：ref也可以绑定DOM元素）【ref链】
1. 在父组件的模板中，使用ref = refName 绑定在两个兄弟组件身上
1. 在任意一个子组件中，就可以通过 this. $parent.$ refs.refName 就可以获得另一个子组件了，同时这个自组件身上的数据和方法同样也得到了


<body>
<div id="app">
<Father></Father>
</div>
<template id="Father">
<div>
<h3> 我是父亲 </h3>
<hr>
<boy ref = "boy" ></boy>
<hr>
<girl ref = "girl" ></girl>
<div ref = 'hello'>
你好
</div>
</div>
</template>
<template id="boy">
<div>
<h3> I am boy </h3>
<p> 我现在有：{{ cash }} 钱 </p>
</div>
</template>
<template id="girl">
<div>
<h3> I am girl </h3>
<button @click = 'give'> 给body 1000块 </button>
</div>
</template>
</body>


<script>
Vue.component('Father',{
template: '#father',
data () {
return {
name: 'father'
}
}
})
Vue.component('boy',{
template: '#boy',
data () {
return {
cash: 2000
}
},
methods: {
incrementCash (value) {
this.cash += value
}
}
})
Vue.component('girl',{
template: '#girl',
data () {
return {
money: 1000
}
},
methods: {
give(){
console.log('====================================');
console.log(this.$parent);
console.log('====================================');
// console.log( this.$parent.$refs ) // { body: Vuecomponent,girl: VueComponent }
this.$parent.$refs.boy.incrementCash( this.money )
// this.$parent.$children
}
}
})
new Vue({
el: '#app'
})
</script>

通过事件总线（bus）
1. 它是通过事件的发布（声明），以及事件的订阅（触发）来做的
1. 首先在js中创建一个bus对象（vm）

var bus = new Vue()

1. 在Count组件中定义数据，和修改数据的方法
1. 在Count组件中通过 created 钩子，进行bus事件的发布

created: {
bus.$on('add',this.addCount)
}

1. 在MyButton组件的方法中通过 bus进行事件的订阅

increment () {
bus.$emit( 'add' )
}

多组件状态共享

使用 Vue-Router
使用状态管理工具 Vuex

eg:

<body>
<div id="app">
<Mbutton></Mbutton>
<count></count>
</div>
<template id="button">
<div id="button_box">
<button @click="increment">INCREMENT</button>
</div>
</template>
<template id="count">
<div id="count_box">
<p>{{count}}</p>
</div>
</template>
</body>

js部分代码

<script>
var bus = new Vue()
Vue.component('Mbutton',{
template:'#button',
methods:{
increment(){
bus.$emit('add')
}
}
})
Vue.component('count',{
template: '#count',
data(){
return{
count:0
}
},
methods:{
addCount(){
this.count++
}
},
created(){
bus.$on('add',this.addCount)
}
})
new Vue({
el:'#app',
})
</script>


## 组件生命周期
越狱
24小时
英版反击

组件的各种类型及案例

组件的类型

组件通信

eg:HTML部分

js部分

eg:HTML部分

js部分

eg:HTML

js部分

eg:

js部分代码

猜你喜欢