Vue組件化通訊
1. Vue的組成文件(.vue)
分為三部分，分別對應html,js,css
- <template></template>
- <script></script>
- <style></style>
2. Vue的生命周期函數(watch的時候dom也沒有更新)
- beforeCreate() 創建數據之前
- created() 創建數據 我們在這里的得到我們在data里面創建的數據
- beforeMount() // Dom渲染完成前
- mounted() //Dom渲染完成
- beforeUpdate() // 更新視圖 在beforeUpdate觸發時，視圖已經更新完成
- Updated() //更新數據調用的函數、。
<div id='app'>
<p>{{msg}}</p>
<input type='text' v-model='msg'>
</div>
var app = new Vue({
el: '#app',
data() {
return {
msg: 1
}
},
beforeCreate() {
console.log('beforeCreate', this.msg); //beforeCreate undefined
console.log('beforeCreate: ', document.getElementsByTagName('p')[0]) //beforeCreate <p>{{msg}}</p>
},
created() {
// 創建數據
console.log('created', this.msg); //beforeCreate 1
console.log('created: ', document.getElementsByTagName('p')[0]) //beforeCreate <p>{{msg}}</p>
// 異步處理得到渲染的dom數據
setTimeout(() => {
this.msg = 100
console.log('nextTick', document.getElementsByTagName('p')[0])
}, 100)
// nextTick <p>100</p>
},
beforeMount() {
console.log('beforeMount', this.msg) //beforeMount 1
console.log('beforeMount: ', document.getElementsByTagName('p')[0]) // beforeMount <p>{{msg}}</p>
},
mounted() {
// 渲染dom
console.log('mounted', this.msg) //mounted 1
console.log('mounted: ', document.getElementsByTagName('p')[0]) //mounted <p>1</p>
},
beforeUpdate() {
console.log('beforeUpdate', this.msg) //beforeUpdate 100
console.log('beforeUpdate: ', document.getElementsByTagName('p')[0]) //beforeUpdate <p>100</p>
},
updated() {
console.log('updated', this.msg) // updated 1
console.log('updated: ', document.getElementsByTagName('p')[0]) // updated <p>100</p>
}
})
3. export default
每一個模塊都是自己的作用域，相應的屬性來處理數據和函數
- data(聲明數據，可以是函數和屬性)
-
類型：
Object | Function - 組件只接受函數
// 對象的形式
export default{
data: {
a:1
}
}
// 函數的形式
export default{
data(){
return {
a: 1
}
}
}
- methods(一些指令和其他屬性的調用方法)
- 不要用箭頭函數來寫里面的函數
- this指向Vue的實例
export default{
methods: {
plus() {
this.a++
}
}
}
- components (組件化定義)
-
類型：
Object - 自定義元素，增加代碼的復用性
-
類型：
// 當我們引用一個.vue文件的時候，就像使用這個文件來充當我們主體的一部分
<div>
<hello></hello>
</div>
import hello from './hello.vue'
export default {
components: {
hello
}
}
-
computed(計算屬性)
- 計算屬性的結果會被緩存，依賴的數據發生變化才會重新渲染
- 注意計算屬性和methods,watch的區別
{{this.total}} //[3,4] <button @click='add'>添加數據</button> //點擊會更新this.total export default { data: () => ({ a: 1, b: [2,3] }), methods: { add(){ this.b.push(8); } }, computed: { total(){ return this.b.map((item)=>{ return item+this.a }) } } } -
watch(監聽對應的數據)
- 鍵值對。鍵是我們需要監督的數據，值是相應的回調函數
- 回調函數接受2個參數，新的值和舊的值（對于數組和對象不會出現舊值，對于簡單的數據會出現舊值）
- 監聽對象的內部值變化，需要添加deep:true（數組不用）
// 點擊后相應的變化 data(){ return { a: 1, b: [2,4,6], c:{name:'hcc',age:22} } }, methods: { add(){ this.a++ this.b.push(8) this.c.name = 'yx' } }, watch: { b: function(val, oldVal){ console.log('new', val) //[2,4,6,8] console.log('new', oldVal) //[2,4,6,8] }, a: function(val, oldVal){ console.log(val); //2 console.log(oldVal); //1 }, c:{ handler(val){ console.log(val); //{name: 'yx',age: 22} } } }, -
props(用于接受父組件傳來的數據)
- 規定和接受父組件的數據
- 單向數據流，子組件不能修改傳遞過來的數據
- 對象和數組是引用類型，指向同一個內存空間，如果 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態。
- 可以規定接受的數據類型和默認值，如果是對象和數組，默認值導出是一個函數
// 父組件 <hello :formParent='num'></hello> //html components: { hello }, data(){ return { num: 3 } } //子組件 //1. 數組規定接受的數據 props: ['hello'] //2. 驗證的方式 props:{ hello: Number, hello: [String, Number], hello: { type: Object, default(){ return {message: 'hello'} } } } -
v-on和v-emit(子組件向父元素傳遞數據)
-
vm.$emit: 子元素向父元素定義訊號和傳遞數據
this.$emit('規定的訊號名稱', '想傳遞給父元素的數據') -
vm.$on: 監聽訊號，并觸發相應的函數(函數內部不用傳參)
@'規定的訊號名稱'='調用自己組件的方法并可以接受傳遞的參數'
// 子組件 data () { return { msg: 'Welcome to Your Vue.js App' } }, methods: { change(){ this.$emit('sendMsg',this.msg) //把msg傳遞給父組件 } } // 父組件 // 引入子組件，并定義components components: { hello }, methods: { show(msg){ // 這里接受子組件傳遞的參數 console.log(msg); } } <hello @sendMsg='show'></hello> // 這里不用傳遞參數，不然會覆蓋子元素傳遞的參數 -
-
ref(用來獲取dom和子組件)
可以用來操作dom
<p ref="p">hello</p>可以用來組件中的通訊
-
在組件中使用的this.refs是一個對象，包含了所有的綁定了的dom和子組件
// html <h1 ref="myElement">這是一個dom元素</h1> //dom元素 <hello :propnum="propnum" :obj='d' @getson='getMsg' ref='child'></hello> // 子組件 >-- 組件中this.refs => {myElement: h1, child: VueComponent} // 運用(在父元素中調用子元素的方法) // html <hello ref='child'></hello> // 子元素hello methods: { change() { this.$emit('getson',this.msg) this.obj.name = 'yx' }, drop(el) { el.style.background = 'red'; } }, // 父元素 methods: { add() { console.log(this.refs); //{child: VueComponent} this.$refs.child.drop('這里傳遞父元素的dom節點') } } //如果有一個需求是，一個父元素有2個子組件，其中一個子組件的方法要調用另一個子組件的dom元素 1. 一個子組件需要向父組件發送元素this.$emit('方法名',dom) 2. 父元素接受到子組件的傳遞得到對應dom 3. 父元素通過this.$refs調用對應的另一個子組件的方法并傳入參數 // 子元素hello和world <div class="world"> <h1 ref="world">這是world的dom元素</h1> <button @click='send'>給父元素傳遞dom</button> </div> methods: { send(){ this.$emit('give',this.$refs.world); //給父元素發送dom } <div class='hello'> <button>改變dom</button> </div> methods: { changeDom(target){ console.log(target) } } // 父元素 <world @give='父親自己的方法'></world> <hello ref='helloChild'></hello> methods: { // 這里接受子元素傳遞過來的dom元素 '父親自己的方法'(target) { this.refs.helloChild.changeDom(target) //調用另一個子元素的方法，并把dom傳遞過去 } }
-
vm.nextTick(callback)
下次dom更新循環結束后執行對應的回調函數
在修改數據之后立即使用這個方法，可以獲取更新后的DOM結構
- 使用場景
- 在 Vue 生命周期的 created() 鉤子函數進行的 DOM 操作一定要放在 Vue.nextTick() 的回調函數中。原因是什么呢，原因是
在 created() 鉤子函數執行的時候 DOM 其實并未進行任何渲染，而此時進行 DOM 操作無異于徒勞，所以此處一定要將 DOM 操作的 js 代碼放進 Vue.nextTick() 的回調函數中。
與之對應的就是 mounted 鉤子函數，因為該鉤子函數執行時所有的 DOM 掛載和渲染都已完成，此時在該鉤子函數中進行任何DOM操作都不會有問題 。 - 在數據變化后要執行的某個操作，而這個操作需要使用隨數據改變而改變的 DOM 結構的時候，這個操作都應該放進 Vue.nextTick() 的回調函數中。
- 在 Vue 生命周期的 created() 鉤子函數進行的 DOM 操作一定要放在 Vue.nextTick() 的回調函數中。原因是什么呢，原因是
// 需求一，如果我們想異步請求數據后，在鉤子函數mounted之前只用對應的dom
// 思路： 通過異步等dom更新后，然后獲得對應的dom
<template>
<h1 ref='title'>{}</h1>
</template>
<script>
export default {
data() {
b: 'hello nextTick'
},
create() {
console.log(this.refs.title) // undefined
},
// 這樣可以獲得對應的dom (當dom全部渲染后再執行console.log())
// create() {
// this.$nextTick(()=>{
// console.log(this.refs.title); // <h1>hello nextTick</h1>(輸出在mounted的后面)
// })
// },
mounted() {
console.log(this.refs.title) // <h1>hello nextTick</h1>
}
}
</script>
?
