組件定義與使用
1. vue 文件的組成(3 個部分)
1）模板頁面
<template>
頁面模板
</template>
2）JS 模塊對象
<script>
export default {
data() {return {}},
methods: {},
computed: {},
components: {}
}
</script>
3）樣式
<style>
樣式定義
</style>
2. 基本使用
1）引入組件
2）映射成標(biāo)簽
3）使用組件標(biāo)簽
<template>
<HelloWorld></HelloWorld>
<hello-world></hello-world>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
components: {
HelloWorld
}
}
</script>
3. 關(guān)于標(biāo)簽名與標(biāo)簽屬性名書寫問題
1）寫法一：一模一樣
2）寫法二：大寫變小寫, 并用-連接
組件間通信
1. 組件間通信基本原則
1）不要在子組件中直接修改父組件的狀態(tài)數(shù)據(jù)
2）數(shù)據(jù)在哪, 更新數(shù)據(jù)的行為(函數(shù))就應(yīng)該定義在哪
2. vue 組件間通信方式
1）props
2）vue 的自定義事件
3）消息訂閱與發(fā)布(如: pubsub 庫)
4）slot
5）vuex
組件間通信 1: props
1. 使用組件標(biāo)簽時
<my-component name='tom' :age='3' :set-name='setName'></my-component>
2. 定義 MyComponent 時
1）在組件內(nèi)聲明所有的 props
2）方式一: 只指定名稱
props: ['name', 'age', 'setName']
3）方式二: 指定名稱和類型
props: {
name: String, age: Number,
setNmae: Function
}
4）方式三: 指定名稱/類型/必要性/默認(rèn)值
props: {
name: {type: String, required: true, default:xxx},
}
3. 注意
1）此方式用于父組件向子組件傳遞數(shù)據(jù)
2）所有標(biāo)簽屬性都會成為組件對象的屬性, 模板頁面可以直接引用
3）問題:
a.如果需要向非子后代傳遞數(shù)據(jù)必須多層逐層傳遞
b.兄弟組件間也不能直接 props 通信, 必須借助父組件才可以
組件間通信 2: vue 自定義事件
1. 綁定事件監(jiān)聽
// 方式一：通過 v-on 綁定
@delete_todo="deleteTodo"
// 方式二：通過 refs.xxx.$on('delete_todo', function (todo) {
this.deleteTodo(todo)
})
2. 觸發(fā)事件
// 觸發(fā)事件(只能在父組件中接收)
this.$emit(eventName, data)
3. 注意:
1）此方式只用于子組件向父組件發(fā)送消息(數(shù)據(jù))
2）問題: 隔代組件或兄弟組件間通信此種方式不合適
組件間通信 3: 消息訂閱與發(fā)布(PubSubJS 庫)
1. 訂閱消息
PubSub.subscribe('msg', function(msg, data){})
2. 發(fā)布消息
PubSub.publish('msg', data)
3. 注意
優(yōu)點: 此方式可實現(xiàn)任意關(guān)系組件間通信(數(shù)據(jù))
4. 事件的 2 個重要操作(總結(jié))
1）綁定事件監(jiān)聽 (訂閱消息)
目標(biāo): 標(biāo)簽元素 <button>
事件名(類型): click/focus
回調(diào)函數(shù): function(event){}
2）觸發(fā)事件 (發(fā)布消息)
DOM 事件: 用戶在瀏覽器上對應(yīng)的界面上做對應(yīng)的操作
自定義: 編碼手動觸發(fā)
組件間通信 4: slot
1. 理解
此方式用于父組件向子組件傳遞標(biāo)簽數(shù)據(jù)
2. 子組件: Child.vue
<template>
<div>
<slot name="xxx">不確定的標(biāo)簽結(jié)構(gòu) 1</slot>
<div>組件確定的標(biāo)簽結(jié)構(gòu)</div>
<slot name="yyy">不確定的標(biāo)簽結(jié)構(gòu) 2</slot>
</div>
</template>
3. 父組件: Parent.vue
<child>
<div slot="xxx">xxx 對應(yīng)的標(biāo)簽結(jié)構(gòu)</div>
<div slot="yyy">yyyy 對應(yīng)的標(biāo)簽結(jié)構(gòu)</div>
</child>
vue 項目中常用的 2 個 ajax 庫
1.vue-resource
vue 插件, 非官方庫, vue1.x 使用廣泛
2.axios
通用的 ajax 請求庫, 官方推薦, vue2.x 使用廣泛
vue-resource 的使用
1. 在線文檔
https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
2. 下載
npm install vue-resource --save
3. 編碼
// 引入模塊
import VueResource from 'vue-resource'
// 使用插件
Vue.use(VueResource)
// 通過 vue/組件對象發(fā)送 ajax 請求
this.$http.get('/someUrl').then((response) => {
// success callback
console.log(response.data) //返回結(jié)果數(shù)據(jù)
}, (response) => {
// error callback
console.log(response.statusText) //錯誤信息
})
axios 的使用
1. 在線文檔
https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
2. 下載:
npm install axios --save
3. 編碼
// 引入模塊
import axios from 'axios'
// 發(fā)送 ajax 請求
axios.get(url)
.then(response => {
console.log(response.data) // 得到返回結(jié)果數(shù)據(jù)
})
.catch(error => {
console.log(error.message)
})
4. 測試接口
接口 1: https://api.github.com/search/repositories?q=v&sort=stars
