1、什么是組件通信
組件間如何通信，也就成為了vue中重點知識，組件通信，涉及到組件之間數據的傳遞、類似NET POST/GET參數傳遞。
Vue基本的三種傳遞方式** (props、\(ref、\)emit)** 組件是 vue.js 最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味着不同組件之間的數據無法相互引用。那么組件間如何通信，也就成為了vue中重點知識了。這篇文章將會通過props、$ref和 $emit 這幾個知識點，來講解如何實現父子組件間通信。
2、父子通信 (props、\(ref、\)emit) 區別
prop 着重於數據的傳遞，它並不能調用子組件里的屬性data和方法methods。適合的場景是從父親給孩子，給了之后就是給了，最適合使用prop,。
$ref 着重於索引，主要用來調用子組件里的屬性和方法，其實並不擅長數據傳遞，但是也是可以傳遞參數的。
3、Props 父到子
3.1 參考代碼
3.1.1 父頁面
- 父頁面調用子組件 參考（1）
- 引用子組件 參考（2）
- 注冊局部組件 參考（3）
<template>
<div>
<h1>我是父組件！</h1>
<one-chart id="myChart" :height="500px" :width="500px" :chart-option="echartOption" />
<!-- （1）這是子組件--->
</div>
</template>
<script>
// （2）引用一下子組件 位置
import OneChart from '@/components/Charts/OneChart'
export default {
components: { OneChart }, // （3）注冊一下組件
}
</script>
3.1.2 子頁面
- props 寫入需要的屬性。props 支出類型【String、Number、Boolean、Array、Object、Date、Function、Symbol】，參考官網文檔（組件props 介紹）
<template>
<h3>我是子組件！</h3>
</template>
<script>
import echarts from 'echarts'
import resize from './mixins/resize'
export default {
name: 'OneChart',
mixins: [resize],
props: {
className: {
type: String,
default: 'chart'
},
id: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '200px'
},
height: {
type: String,
default: '200px'
},
chartOption: {
type: Object,
default: () => []
}
},
data() {
return {
chart: null
}
},
watch: {
chartOption: function() {
console.log('我是組件chart watch')
console.log(this.chartOption)
if (this.chartOption !== undefined && this.chartOption !== null) {
this.initChart()
}
}
},
mounted() {
console.log('我是組件chart mounted')
console.log(this.chartOption)
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
console.log(this)
}
}
}
</script>
3.2 擴展知識
- 單向數據流（從父到子，先父后子）
- 傳遞靜態或動態 Prop（v-bind）
- 駝峰命名法等價短橫線分隔命名
- 子組件繼承父組件的屬性
- 子組件繼承父組件的屬性，可以設置替換/合並已有的 Attribute（覆蓋重寫）、禁用 Attribute 繼承
詳細介紹文檔https://cn.vuejs.org/v2/guide/components-props.html
4、ref 父到子
4.1 參考代碼
4.1.1 父頁面
<base-input ref="usernameInput"></base-input>
可以在父頁面任意的使用,可以調用子頁面的 methods
this.$refs.usernameInput.focus()
this.$refs.usernameInput.demo('我是參數，任意的那種')
4.1.2 子頁面
methods: {
// 用來從父級組件聚焦輸入框
focus: function () {
this.$refs.input.focus()
},
demo(data){
console.log(data)
}
}
4.2 擴展知識
- 盡管存在 prop 和事件，有的時候你仍可能需要在 JavaScript 里直接訪問一個子組件。為了達到這個目的，你可以通過 ref 這個 attribute 為子組件賦予一個 ID 引用。例如：
- 當 ref 和 v-for 一起使用的時候，你得到的 ref 將會是一個包含了對應數據源的這些子組件的數組。
- $refs 只會在組件渲染完成之后生效，並且它們不是響應式的。這僅作為一個用於直接操作子組件的“逃生艙”——你應該避免在模板或計算屬性中訪問 $refs。
- ref 對子組件的方法屬性的索引，通過$ref可能獲取到在子組件里定義的屬性和方法。
- 如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通過\(ref可能獲取到該DOM 的屬性集合，訪問DOM元素，作用與JQ的 【\)('#ID')】類似。
5、emit 子到父
5.1 參考代碼
5.1.1 父頁面
<base-input ref="usernameInput" @inputShowMsg="showMsg" ></base-input>
methods: {
// 用來從父級組件聚焦輸入框
focus: function () {
this.$refs.input.focus()
},
showMsg(data){
console.log('showMsg')
console.log(data)
//data 輸出： 我是組件的參數，接收一下啊
}
}
4.1.2 子頁面
methods: {
demo(data){
console.log('demo')
console.log(data)
this.$emit('getMessage', '我是組件的參數，接收一下啊')
}
}
5.2 擴展知識
- emit 是程序化的事件偵聽器，它可以被 v-on 偵聽
- 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件——在創建更高層次的組件時非常有用。