一. 創建和使用組件
1. 自己定義組件（組件也是包含: js，json，wxml，wxss的頁面文件）
2. 在需要使用該組件的頁面中，添加組件信息
創建組件
1. 在根目錄，創建components文件夾，用來存放組件的子文件夾。
2. 可以在components中創建子文件夾，用來作為自定義組件，子文件夾中包含：js, wxml, json, wxss
聲明組件
1. 在需要使用自定義組件的頁面. json文件中，在usingComponents對象中增加組件聲明
{ "usingComponents": { "Tabs": "../../components/Tabs/Tabs" } }
在其它頁面中使用組件
在.html中使用該組件的標簽
<Tabs>...</Tabs>
二. 父組件向子組件傳傳遞數據：通過 屬性 來傳遞
1. 微信小程序中 父組件向子組件傳遞數據
1. 父組件中，.html 中使用子組件標簽：<標簽名>...</標簽名>； 使用標簽屬性綁定數據： <標簽名 屬性名='{{變量名}}'></標簽名>
2. 子組件中，.js 文件中Components對象里的屬性：properties，用來獲取父組件傳遞來的數據
properties:{
屬性名：{
type：String / Array / ... # 數據類型
value：‘ ’/ 【 】 / ... # 默認值
}
}
2. Vue中 父組件向子組件傳遞數據
1. 類似於小程序中的用法,區別: <標簽名 v-bind:屬性名='變量名'></標簽名> 原因: vue中想要在標簽屬性中使用變量,不能使用mustache語法,只能使用v-bind綁定
2. 子組件接收數據類似於小程序,區別:
props:{
屬性名: {
...
}
或
屬性名: Array (數據類型)
}
三. 子組件向父組件傳遞數據： 通過 綁定事件 來傳遞
1. 微信小程序中, 子組件向父組件發送事件,傳遞數據
1. 子組件.js中，在某個子組件事件中，通過 this.triggerEvent('自定義事件名', 數據) 綁定一個 事件名 和 數據
事件名1(){
this.triggerEvent('自定義事件名2', 數據)
}
2. 父組件.html中， 使用組件標簽來接收綁定的事件和數據，<標簽名 bind事件名=“父組件內定義一個事件”>...</標簽名>，數據可以在父組件中定義的事件中，通過參數 e 來提取
2. Vue中, 子組件向父組件發送事件,傳遞數據
1. 子組件中, 邏輯與小程序相同, 區別: 使用this.$emit('自定義事件名', 數據)
methods:{
子組件事件名(){
this.$emit('自定義事件名', 數據)
}
}
2.父組件, 區別: <標簽名 v-on: 自定義事件名=“父組件內定義一個方法”>...</標簽名>
注意:此時,父組件中定義的方法,可以不使用()來接收參數,且因不屬於內部事件,不會默認傳遞event到事件中, 而是會將發射時的數據傳遞到事件中
methods:{
父組件內定義一個方法名(數據參數){
console.log(數據)
}
}
四. slot插槽
相當於占位符，父組件傳遞什么內容，就顯示什么內容
微信小程序插槽：
暫無
Vue的插槽：
一般插槽： <slot></slot>
具名插槽： <slot name='自定義名稱'></slot>
作用域插槽：<slot : 自定義屬性名=“變量”></slot>
Vue中，通過作用域插槽，也可以將子組件的數據，綁定到一個自定義的屬性中，傳遞給父組件使用。
使用：
在父組件中，通過聲明：slot-scpoe="slot"后， 就可以通過slot.插槽中的自定義的屬性名 來使用數據：
<子組件標簽名> <template slot-scpoe="slot"> <希望插入插槽的標簽>slot.插槽中的自定義的屬性名</希望插入插槽的標簽> </template> </子組件標簽名>
補：ref 注冊引用信息： 可以通過ref獲取到組件的實例
# 被用來給元素或子組件注冊引用信息（ID的替代者） # 應用在html標簽上獲取的是真實DOM元素，應用在組件標簽上是組件實例對象（vc） 用法： 1. 打標識：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>``` 2. 獲取：```this.$refs.xxx```
//父組件中通過ref獲取子組件的實例，此處獲取的子組件HelloWorld <template> <div class="home"> <h1>我是父組件<button @click="change">點我查看被ref標記的組件</button></h1> <HelloWorld ref="HelloWorld" /> </div> </template> <script> import HelloWorld from "@/components/HelloWorld.vue"; export default { name: "Home", components: { HelloWorld, }, methods: { change() { console.log(this.$refs.HelloWorld); }, }, }; </script>
chang()中打印調用子組件HellWorld的實例： this.$refs.HellWorld
結果：
拿到組件實例我們可以直接更改組件的數據，以及觸發組件的方法
methods: { change() { this.$refs.HelloWorld.num+=1, this.$refs.HelloWorld.Subcomponents() },