如何使用Vue實現組件化通訊

這篇文章主要介紹了如何使用Vue實現組件化通訊的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇如何使用Vue實現組件化通訊文章都會有所收獲，下面我們一起來看看吧。

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

分為三部分，分別對應html,js,css

<template></template>

<script></script>

<style></style>

2. Vue的生命周期函數

1. beforeCreate() 創建數據之前

2. created() 創建數據 我們在這里的得到我們在data里面創建的數據

3. beforeMount() // Dom渲染完成前

4. mounted() //Dom渲染完成

5. beforeUpdate() // 更新視圖 在beforeUpdate觸發時，視圖已經更新完成

6. 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(一些指令和其他屬性的調用方法)

1. 不要用箭頭函數來寫里面的函數

2. this指向Vue的實例

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

1、components (組件化定義)

類型： Object

自定義元素，增加代碼的復用性

 // 當我們引用一個.vue文件的時候，就像使用這個文件來充當我們主體的一部分
 <div>
   <hello></hello> 
 </div>

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

2、computed(計算屬性)

1. 計算屬性的結果會被緩存，依賴的數據發生變化才會重新渲染

2. 注意計算屬性和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(監聽對應的數據)

1. 鍵值對。鍵是我們需要監督的數據，值是相應的回調函數

2. 回調函數接受2個參數，新的值和舊的值（對于數組和對象不會出現舊值，對于簡單的數據會出現舊值）

3. 監聽對象的內部值變化，需要添加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(用于接受父組件傳來的數據)

1. 規定和接受父組件的數據

2. 單向數據流，子組件不能修改傳遞過來的數據

3. 對象和數組是引用類型，指向同一個內存空間，如果 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態。

4. 可以規定接受的數據類型和默認值，如果是對象和數組，默認值導出是一個函數

// 父組件

<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和子組件)

1. 可以用來操作dom<p ref="p">hello</p>

2. 可以用來組件中的通訊

3. 在組件中使用的this.refs是一個對象，包含了所有的綁定了的dom和子組件

// html 
 <h2 ref="myElement">這是一個dom元素</h2> //dom元素
 <hello :propnum="propnum" :obj='d' @getson='getMsg' ref='child'></hello> // 子組件
 >-- 組件中this.refs => {myElement: h2, 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">
  <h2 ref="world">這是world的dom元素</h2>
  <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傳遞過去
  }
 }

Vue的優點

Vue具體輕量級框架、簡單易學、雙向數據綁定、組件化、數據和結構的分離、虛擬DOM、運行速度快等優勢，Vue中頁面使用的是局部刷新，不用每次跳轉頁面都要請求所有數據和dom，可以大大提升訪問速度和用戶體驗。

關于“如何使用Vue實現組件化通訊”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“如何使用Vue實現組件化通訊”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。