Vue中怎么實(shí)現(xiàn)組件化通訊

本篇文章為大家展示了Vue中怎么實(shí)現(xiàn)組件化通訊，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶(hù)真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)建站是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶(hù)帶來(lái)驚喜。創(chuàng)新互聯(lián)建站推出開(kāi)封免費(fèi)做網(wǎng)站回饋大家。

1. Vue的組成文件(.vue)

分為三部分，分別對(duì)應(yīng)html,js,css

<template></template>

<script></script>

<style></style>

2. Vue的生命周期函數(shù)

beforeCreate() 創(chuàng)建數(shù)據(jù)之前
created() 創(chuàng)建數(shù)據(jù) 我們?cè)谶@里的得到我們?cè)赿ata里面創(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)的屬性來(lái)處理數(shù)據(jù)和函數(shù)

data(聲明數(shù)據(jù)，可以是函數(shù)和屬性)

類(lèi)型：Object | Function

組件只接受函數(shù)

  // 對(duì)象的形式
  export default{
   data: {
    a:1
   }
  }
  // 函數(shù)的形式
  export default{
   data(){
    return {
     a: 1
    }
   }
  }

methods(一些指令和其他屬性的調(diào)用方法)

不要用箭頭函數(shù)來(lái)寫(xiě)里面的函數(shù)
this指向Vue的實(shí)例

 export default{
  methods: {
   plus() {
    this.a++
   }
  }
 }

1、components (組件化定義)

類(lèi)型： Object

自定義元素，增加代碼的復(fù)用性

 // 當(dāng)我們引用一個(gè).vue文件的時(shí)候，就像使用這個(gè)文件來(lái)充當(dāng)我們主體的一部分
 <div>
   <hello></hello> 
 </div>

 import hello from './hello.vue'
 export default {
  components: {
   hello
  }
 }

2、computed(計(jì)算屬性)

計(jì)算屬性的結(jié)果會(huì)被緩存，依賴(lài)的數(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)聽(tīng)對(duì)應(yīng)的數(shù)據(jù))

鍵值對(duì)。鍵是我們需要監(jiān)督的數(shù)據(jù)，值是相應(yīng)的回調(diào)函數(shù)
回調(diào)函數(shù)接受2個(gè)參數(shù)，新的值和舊的值（對(duì)于數(shù)組和對(duì)象不會(huì)出現(xiàn)舊值，對(duì)于簡(jiǎn)單的數(shù)據(jù)會(huì)出現(xiàn)舊值）
監(jiān)聽(tīng)對(duì)象的內(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(用于接受父組件傳來(lái)的數(shù)據(jù))

規(guī)定和接受父組件的數(shù)據(jù)
單向數(shù)據(jù)流，子組件不能修改傳遞過(guò)來(lái)的數(shù)據(jù)
對(duì)象和數(shù)組是引用類(lèi)型，指向同一個(gè)內(nèi)存空間，如果 prop 是一個(gè)對(duì)象或數(shù)組，在子組件內(nèi)部改變它會(huì)影響父組件的狀態(tài)。
可以規(guī)定接受的數(shù)據(jù)類(lèi)型和默認(rèn)值，如果是對(duì)象和數(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)名稱(chēng)', '想傳遞給父元素的數(shù)據(jù)')

vm.$on: 監(jiān)聽(tīng)訊號(hào)，并觸發(fā)相應(yīng)的函數(shù)(函數(shù)內(nèi)部不用傳參)

@'規(guī)定的訊號(hào)名稱(chēng)'='調(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(用來(lái)獲取dom和子組件)

可以用來(lái)操作dom<p ref="p">hello</p>
可以用來(lái)組件中的通訊
在組件中使用的this.refs是一個(gè)對(duì)象，包含了所有的綁定了的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. 父元素接受到子組件的傳遞得到對(duì)應(yīng)dom
//3. 父元素通過(guò)this.$refs調(diào)用對(duì)應(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: {
  // 這里接受子元素傳遞過(guò)來(lái)的dom元素
  '父親自己的方法'(target) {
   this.refs.helloChild.changeDom(target) //調(diào)用另一個(gè)子元素的方法，并把dom傳遞過(guò)去
  }
 }

上述內(nèi)容就是Vue中怎么實(shí)現(xiàn)組件化通訊，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：Vue中怎么實(shí)現(xiàn)組件化通訊
新聞來(lái)源：http://www.chinadenli.net/article26/geidjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、全網(wǎng)營(yíng)銷(xiāo)推廣、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站維護(hù)、域名注冊(cè)、移動(dòng)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

Vue中怎么實(shí)現(xiàn)組件化通訊