【Vue組件通信】props、$ref、$emit,組件傳值

来源:https://www.cnblogs.com/sopcce/archive/2020/07/24/13370748.html

組件是 vue.js 最強大的功能之一,而組件實例的作用域是相互獨立的,這就意味著不同組件之間的數據無法相互引用。那麼組件間如何通信,也就成為了vue中重點知識了。這篇文章將會通過props、$ref和 $emit 這幾個知識點,來講解如何實現父子組件間通信。 ...


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. 父頁面調用子組件 參考(1)
  2. 引用子組件 參考(2)
  3. 註冊局部組件 參考(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 子頁面

  1. 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" 傳入**內部組件**——在創建更高層次的組件時非常有用。

您的分享是我們最大的動力!

更多相關文章
  • 教程 Flutter瀑布流及通用列表解決方案 Canonical 在 Linux 上提供 Flutter 桌面應用支持 插件 koukicons-flutter 🍪 Colorful Icons for your Flutter App fontify Converts SVG icons to ...
  • (一)三表 用途 list列表 整齊佈局 ul先到先得,ol有序排列,還有個自定義【dl>dt>dd】 table列表 展示數據結構 【caption table>th/tr>td(thead標題 tbody數據 tfoot腳註)】 【border/cellspacing/cellpadding表格 ...
  • 在安裝vue-awesome-swiper時報錯swiper/dist/css/swiper.min.css找不到,如下如: 有的回答安裝6.0版本的話需要引入另外一個css import 'swiper/swiper-bundle.css' 但是,我替換完css 之後又一個問題出現了,vue-aw ...
  • 在選擇的元素內: append() //後 prepend() //前 在選擇的元素外: after() //後 before() //前 舉例: ...
  • 首先需要搭建一個簡單的應用 前端部分不多贅述,如果確實沒接觸過 Vue 項目,可以參考我的《Vue 爬坑之路》系列 後端服務可以參考之前的文章《Node.js 蠶食計劃(六)—— MongoDB + Koa 入門》 完整的項目地址:https://github.com/wisewrong/Test- ...
  • 字體 文本顏色:color:red;字體分類: 襯線字體serif --字體寬度各異,有襯線 --Times、Georgia、宋體 無襯線字體sans-serif --字體寬度各異,無襯線 --Helvetica、Verdana、Arial、微軟雅黑 等寬字體monospace --字體寬度一樣,一 ...
  • 示例 1: 輸入: s = "leetcode"輸出: false 示例 2: 輸入: s = "abc"輸出: true限制: 0 <= len(s) <= 100如果你不使用額外的數據結構,會很加分。 /** * @param {string} astr * @return {boolean} ...
  • 移動設備的流行,帶動了移動互聯網的快速發展,很多開發者開始進入移動開發領域。目前市面上主流的移動設備一般都使用觸摸屏,觸摸屏所使用的觸摸事件模型與傳統網頁的滑鼠事件模型有所區別,這種差異往往使初涉移動端的開發工程師陷入困境,事件穿透問題便是其中一個,本文將帶你瞭解事件穿透及如何在實際項目中選擇合適的... ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...