您好,登錄后才能下訂單哦!
這篇文章主要介紹了如何使用Vue實(shí)現(xiàn)組件化通訊的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇如何使用Vue實(shí)現(xiàn)組件化通訊文章都會(huì)有所收獲,下面我們一起來看看吧。
1. Vue的組成文件(.vue)
分為三部分,分別對應(yīng)html,js,css
<template></template> <script></script> <style></style>
2. Vue的生命周期函數(shù)
beforeCreate() 創(chuàng)建數(shù)據(jù)之前
created() 創(chuàng)建數(shù)據(jù) 我們在這里的得到我們在data里面創(chuàng)建的數(shù)據(jù)
beforeMount() // Dom渲染完成前
mounted() //Dom渲染完成
beforeUpdate() // 更新視圖 在beforeUpdate觸發(fā)時(shí),視圖已經(jīng)更新完成
Updated() //更新數(shù)據(jù)調(diào)用的函數(shù)、。
<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() { // 創(chuàng)建數(shù)據(jù) console.log('created', this.msg); //beforeCreate 1 console.log('created: ', document.getElementsByTagName('p')[0]) //beforeCreate <p>{{msg}}</p> // 異步處理得到渲染的dom數(shù)據(jù) 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
每一個(gè)模塊都是自己的作用域,相應(yīng)的屬性來處理數(shù)據(jù)和函數(shù)
data(聲明數(shù)據(jù),可以是函數(shù)和屬性)
類型:Object | Function
組件只接受函數(shù)
// 對象的形式 export default{ data: { a:1 } } // 函數(shù)的形式 export default{ data(){ return { a: 1 } } }
methods(一些指令和其他屬性的調(diào)用方法)
不要用箭頭函數(shù)來寫里面的函數(shù)
this指向Vue的實(shí)例
export default{ methods: { plus() { this.a++ } } }
1、components (組件化定義)
類型: Object
自定義元素,增加代碼的復(fù)用性
// 當(dāng)我們引用一個(gè).vue文件的時(shí)候,就像使用這個(gè)文件來充當(dāng)我們主體的一部分 <div> <hello></hello> </div> import hello from './hello.vue' export default { components: { hello } }
2、computed(計(jì)算屬性)
計(jì)算屬性的結(jié)果會(huì)被緩存,依賴的數(shù)據(jù)發(fā)生變化才會(huì)重新渲染
注意計(jì)算屬性和methods,watch的區(qū)別
{{this.total}} //[3,4] <button @click='add'>添加數(shù)據(jù)</button> //點(diǎn)擊會(huì)更新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(監(jiān)聽對應(yīng)的數(shù)據(jù))
鍵值對。鍵是我們需要監(jiān)督的數(shù)據(jù),值是相應(yīng)的回調(diào)函數(shù)
回調(diào)函數(shù)接受2個(gè)參數(shù),新的值和舊的值(對于數(shù)組和對象不會(huì)出現(xiàn)舊值,對于簡單的數(shù)據(jù)會(huì)出現(xiàn)舊值)
監(jiān)聽對象的內(nèi)部值變化,需要添加deep:true(數(shù)組不用)
// 點(diǎn)擊后相應(yīng)的變化 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(用于接受父組件傳來的數(shù)據(jù))
規(guī)定和接受父組件的數(shù)據(jù)
單向數(shù)據(jù)流,子組件不能修改傳遞過來的數(shù)據(jù)
對象和數(shù)組是引用類型,指向同一個(gè)內(nèi)存空間,如果 prop 是一個(gè)對象或數(shù)組,在子組件內(nèi)部改變它會(huì)影響父組件的狀態(tài)。
可以規(guī)定接受的數(shù)據(jù)類型和默認(rèn)值,如果是對象和數(shù)組,默認(rèn)值導(dǎo)出是一個(gè)函數(shù)
// 父組件 <hello :formParent='num'></hello> //html components: { hello }, data(){ return { num: 3 } } //子組件 //1. 數(shù)組規(guī)定接受的數(shù)據(jù) props: ['hello'] //2. 驗(yàn)證的方式 props:{ hello: Number, hello: [String, Number], hello: { type: Object, default(){ return {message: 'hello'} } } }
v-on和v-emit(子組件向父元素傳遞數(shù)據(jù))
vm.$emit: 子元素向父元素定義訊號(hào)和傳遞數(shù)據(jù)
this.$emit('規(guī)定的訊號(hào)名稱', '想傳遞給父元素的數(shù)據(jù)')
vm.$on: 監(jiān)聽訊號(hào),并觸發(fā)相應(yīng)的函數(shù)(函數(shù)內(nèi)部不用傳參)
@'規(guī)定的訊號(hào)名稱'='調(diào)用自己組件的方法并可以接受傳遞的參數(shù)'
// 子組件 data () { return { msg: 'Welcome to Your Vue.js App' } }, methods: { change(){ this.$emit('sendMsg',this.msg) //把msg傳遞給父組件 } } // 父組件 // 引入子組件,并定義components components: { hello }, methods: { show(msg){ // 這里接受子組件傳遞的參數(shù) console.log(msg); } } <hello @sendMsg='show'></hello> // 這里不用傳遞參數(shù),不然會(huì)覆蓋子元素傳遞的參數(shù)
ref(用來獲取dom和子組件)
可以用來操作dom<p ref="p">hello</p>
可以用來組件中的通訊
在組件中使用的this.refs是一個(gè)對象,包含了所有的綁定了的dom和子組件
// html <h2 ref="myElement">這是一個(gè)dom元素</h2> //dom元素 <hello :propnum="propnum" :obj='d' @getson='getMsg' ref='child'></hello> // 子組件 >-- 組件中this.refs => {myElement: h2, child: VueComponent} // 運(yùn)用(在父元素中調(diào)用子元素的方法) // 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節(jié)點(diǎn)') } } //如果有一個(gè)需求是,一個(gè)父元素有2個(gè)子組件,其中一個(gè)子組件的方法要調(diào)用另一個(gè)子組件的dom元素 //1. 一個(gè)子組件需要向父組件發(fā)送元素this.$emit('方法名',dom) //2. 父元素接受到子組件的傳遞得到對應(yīng)dom //3. 父元素通過this.$refs調(diào)用對應(yīng)的另一個(gè)子組件的方法并傳入?yún)?shù) // 子元素hello和world <div class="world"> <h2 ref="world">這是world的dom元素</h2> <button @click='send'>給父元素傳遞dom</button> </div> methods: { send(){ this.$emit('give',this.$refs.world); //給父元素發(fā)送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) //調(diào)用另一個(gè)子元素的方法,并把dom傳遞過去 } }
Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢,Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗(yàn)。
關(guān)于“如何使用Vue實(shí)現(xiàn)組件化通訊”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“如何使用Vue實(shí)現(xiàn)組件化通訊”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。