vue組件使用分三步：
1. 引用組件 import facePop from './components/facePop'
2. 注冊組件 components = { facePop }
3. 使用組件 <facePop></facePop>
- 新建一個components文件夾存放組件
src/components/facePop.vue
<template>
<div>
<h2>我是一個facePop組件</h2>
</div>
</template>
- src/index.vue
<template>
<div>
<facePop></facePop> <!--3、在模板中使用kebab-case 兩種都可以-->
<face-pop></face-pop> <!--3、在模板中使用PascalCase-->
</div>
</template>
<script>
import facePop from './components/facePop'; //1、引入組件 import后的名字一般與組件名稱相同，也可不一樣
export default{
data(){},
components:{
facePop //2、注冊組件 一般直接取一個名字 即：facePop：facePop
}
}
</script>
- 組件名大小寫
定義組件名的方式有兩種：
(一) 使用 kebab-case
Vue.component('my-component-name', { /* ... / })
當使用 kebab-case (短橫線分隔命名) 定義一個組件時，你也必須在引用這個自定義元素時使用 kebab-case，例如 <my-component-name>。
（二）使用 PascalCase
Vue.component('MyComponentName', { / ... */ })
當使用 PascalCase (首字母大寫命名) 定義一個組件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時只有 kebab-case 是有效的。
我們使用字符串模板，所以這個限制就不存在了
以上是組件的簡單使用方法。
- 組件之間傳值
【1】父組件給子組件傳值：
1）父組件調(diào)用子組件的時候綁定動態(tài)屬性
2）子組件里通過props（props可以接收一個數(shù)組或?qū)ο?，接收對象時可對數(shù)據(jù)進行校驗如：{title:String}，可以校驗組件傳過來的是否為String）接收父組件傳過來的數(shù)據(jù)
總結(jié)：父組件傳值給子組件（父組件綁定數(shù)據(jù)如:list="list"，子組件通過props獲?。?br> 子組件的props選項能夠接收來自父組件數(shù)據(jù)。沒錯，僅僅只能接收，props是單向綁定的，即只能父組件向子組件傳遞，不能反向。
- 傳遞方式分為兩種：
(1) 靜態(tài)傳遞：
子組件通過props選項來聲明一個自定義的屬性，然后父組件就可以在嵌套標簽的時候，通過這個屬性往子組件傳遞數(shù)據(jù)了
<v-facePop showFaceDia=“這是文字”></v-facePop> // 此處showFaceDia不加冒號
子組件：
props:{
showFaceDia: String
}
(2) 動態(tài)傳遞：
父組件：
data:
{
showFaceDia: false
}
<v-facePop :showFaceDia=“showFaceDia”></v-facePop>
子組件：
props:{
showFaceDia: Boolean
}
- 子組件向父組件傳值 （vue寫法）
子組件中：
this.showFaceDia = false
this.$emit('showFaceDia',this.showFaceDia) //執(zhí)行showFaceDia函數(shù)并把要改變的值作為參數(shù)帶過去
父組件：
methods:{
showFaceDia(msg){
this.showFaceDia = msg
}
}
不要忘記在DOM中引用：
<test :title="title" @showFaceDia="showFaceDia"></test>//注意showFaceDia后不能加括號
- 子組件向父組件傳值 （wepy寫法）
比如父組件中showFaceDia 默認為true
子組件中：
this.showFaceDia = false
this.$emit('showFaceDia',this.showFaceDia) //執(zhí)行showFaceDia函數(shù)并把要改變的值作為參數(shù)帶過去
父組件：
events = {
showFaceDia(msg){
this.showFaceDia = msg
}
}
- 父組件調(diào)用子組件的方法：
ref用在子組件上，指向的是組件實例，可以理解為對子組件的索引，通過$ref可以獲取到在子組件里定義的屬性和方法
//父組件
<v-test :title="title" ref="aa"></v-test> //通過ref為子組件賦予ID引用
<div @click="getChild()"></div>
getChild(){
this.$refs.aa.childFun() // 此處使用
}
- 子組件調(diào)用父組件的方法：
（1）直接在子組件中通過this.$parent.event來調(diào)用父組件的方法
（2）在子組件里用$emit向父組件觸發(fā)一個事件，父組件監(jiān)聽這個事件就行了實例:
子組件：
methods: {
getParent () {
this.$emit('togglePop') //此處直接寫父組件的事件名稱
}
}
父組件：
DOM中：<test :title="title" @togglePop="togglePop"></test>
togglePop(){
console.log('ddddddd')
},
父組件：
DOM中：
<facePop @parentFn.user="togglePop"></facePop>
子組件DOM和方法：
<view @tap="getParent"></view>
methods: {
getParent () {
this.$emit('parentFn')
}
}
通過父組件向子組件傳不同的值作為標識，可以有針對性的對各父組件進行個性化的操作。
父組件1:
data(){
proDetail: 'proDetail'
}
<test :proDetail='proDetail'></test>
子組件：
props:{
proDetail: String
}
if(this.proDetail === 'proDetail'){ ... } //此時針對父組件1的一系列操作
待研究：
非父子組件之間的傳值
