組件間的傳值

来源:https://www.cnblogs.com/linleyi/archive/2020/04/04/12632341.html

父組件給子組件傳值 // 父<div id = "app"> <my-content></my-content></div> // 子<template id="content"> <div class="content"> 這裡是內容區域 {{ msg }} </div></template> 在 ...


父組件給子組件傳值

// 父
<div id = "app">
<my-content></my-content>
</div>

// 子
<template id="content">
<div class="content">
這裡是內容區域--- {{ msg }}
</div>
</template>


在父組件調用子組件的地方,給它添加一個自定義的屬性 test, 屬性的值為 測試

> <my-content test = "測試" ></my-content>

在子組件定義的地方,添加一個選項 props, 值為數組, 數組元素為之前自定義的屬性 test


const MyContent = {
props: ['test'],
template: "#content"
}

接下來就可以在子組件中通過 {{ test }}或者其他的vue的用法使用這個值

>1.父組件在調用子組件的地方,添加一個自定義的屬性,屬性的值為你需要傳遞給子組件的值,
>2. 在子組件定義的地方,添加了一個props選項,它的值是一個由自定義屬性組合而成的數組,
>3. 在子組件的模板中,通過自定的屬性名就可以獲取到父組件傳遞過來的值

 拓展:假如父組件給子組件傳的值是子組件不想要的呢? --- 子組件需要驗證數據的類型,這一步是項目中常用的


 props: {
 test: String
 }

 拓展: 如果你需要的傳遞的值是一個變數,需要使用到綁定屬性

 <my-content :test = "msg" ></my-content>


>1.父組件在調用子組件的地方,添加一個自定義的屬性,屬性的值為你需要傳遞給子組件的值,如果需要傳遞的值是變數,那麼需要使用到綁定屬性
> 2.在子組件定義的地方,添加了一個props選項,它的值是一個由自定義屬性組合而成的數組或者是一個對象,如果需要數據類型的校驗,則使用對象,否則可以使用數組,
> 3.在子組件的模板中,通過自定的屬性名就可以獲取到父組件傳遞過來的值

子組件給父組件傳值

水往地處流,如果嚮往高處流,就需要付出代價

> 子組件中,通過某一個事件,執行 this.$emit('**自定義的事件**', '需要傳遞的值'),

sendData () {
console.log('給父組件傳值')
this.$emit('my-event-test', '11223344')
}


> 在父組件調用子組件的地方,給它 綁定了 子組件中 **自定義的事件**,事件的實現由父組件實現,註意綁定事件中不要添加(),

<my-content @my-event-test = "getData"></my-content>

> 在父組件中實現時添加 參數,參數就是傳遞過來的值

getData (val) {
console.log(val) }

3277e14620c23f0d8b7390054f8ea796.png  


子組件中,通過某一個事件,執行 this.$emit('**自定義的事件**', '需要傳遞的值'),在父組件調用子組件的地方,給它 綁定了 子組件中 **自定義的事件**,事件的實現由父組件實現,註意綁定事件中不要添加(),在父組件中實現時添加 參數,參數就是傳遞過來的值


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

更多相關文章
  • 接上篇 https://www.cnblogs.com/chenyingying0/p/12623653.html 下拉刷新 下拉刷新--變化提示文字 base/scroll/index.vue <template> <!-- wiper會實例化構造函數,生成swiper實例 --> <!-- re ...
  • 最近編寫響應式的時候在使用@media用的不是很順手,所以就記錄一下方便查看 基本語法: @media +( not | only) + 媒體類型 +(and+ 媒體查詢) 我們首先瞭解一下媒體類型,常用的不多,就幾個:screen(電腦屏幕) ,print (列印或者列印預覽),all(所有設備) ...
  • ```javascript ``` ![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20200404222513323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text... ...
  • 案例: 父組件 <template> <div id="app"> <h1>vuex</h1> <h3>count:{{count}}</h3> <button @click="count++">+1</button> <button @click="count--">-1</button> <!- ...
  • 博主:www 原文地址: https://www.cnblogs.com/wangjian8888/p/6092158.html。 字體屬性:(font) 大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到,只要用數值就可以,單位:PX、PD 樣式 ...
  • 前言 做項目涉及表情在網頁上顯示。稍微研究了一下實現方案,整體思路不複雜,就是稍微涉及到一些新概念和新方法。 精靈圖 精靈圖又稱雪碧圖,簡單來說就是一種把很多小圖片拼成一張大圖的圖片形式。下圖就是表情項目中的精靈圖。註意這張精靈圖是png格式,除表情外其他區域都是透明的。 精靈圖解決的問題是:很多網 ...
  • 小計劃 四月抓基礎 五月二刷重點知識,加點項目鞏固(大概三個項目的樣子) 六月抓面試,沖秋招。 四月博客會更以下內容 VUE 全套搭建小米商城(更註重前端) 三種 node.js 方式搭建個人博客(更註重後端) 深入解讀 ES6 系列 再學 JavaScript ES(6-10) 大話 HTTP ... ...
  • 路由(vue-router) 現在的應用都流行SPA應用(single page application) 傳統的項目大多使用多頁面結構,需要切換內容的時候我們往往會進行單個HTML文件的跳轉,這個時候網路、性能影響,瀏覽器會出現不定時間的空白界面,用戶體驗不好 單頁面應用就是用戶通過某些操作地址欄 ...
一周排行
  • 本次課程就正式進入開發部分。 首先我們先搭建項目框架,還是和之前漸進式風格保持一致,除必備組件外,儘量使用原生功能以方便大家理解。 開發工具:vs 2019 或以上 資料庫:SQL SERVER 2017 或以上 其他需要用到的我們在項目過程中再提。 一、新建 MVC項目 1、打開VS 2019,C ...
  • 一.背景說明: 之前分享過一個微服務開發框架, “享一個集成.NET Core+Swagger+Consul+Polly+Ocelot+IdentityServer4+Exceptionless+Apollo+SkyWalking的微服務開發框架”,前兩天在Github上收到一個Issues,是想我 ...
  • 前言 Http我們都已經耳熟能詳了,而關於Http學習的文章網上有很多,各個知識點的講解也可說是深入淺出。然而,學習過後,我們對Http還是一知半解。問題出在了哪? Http是一個客戶機與伺服器之間的通信的協議,真的想學習Http,就必須把客戶機和伺服器也學了,也就是說,必須立體的學習,不然我們永遠 ...
  • 本人製作的這個 “簡易日誌 (SimpleLogger)” 包裡面包含的代碼邏輯,最開始也就是簡單地寫入文本,後來經過實際使用的演化,做了各種優化,添加了一些實用的特性,感覺用著還不錯。正所謂獨樂樂不如眾樂樂,於是將其打包上傳到微軟的包管理庫 NuGet 中,大家可以使用試試,相互交流。 ...
  • 1.需求示意圖 2.需求描述 原本是為了給做unity3d客戶端開發的同事提供不定時的消息推送,比如商城購買道具後服務端將道具信息推送給客戶端。 本篇文章簡化理解,用“相關部門開展活動,向全市人民徵集社會服務改善意見”為例子。但核心想法一致:單向推送(指這個需求上只需要單向)。所以這個功能並不是聊天 ...
  • 找到項目中ServiceStack.Text.dll文件的版本,比如我的版本是5.0.0,到GitHub上下載對應的源碼(https://github.com/ServiceStack/ServiceStack.Text/tags) 打開解決方案,重新生成ServiceStack.Text項目,如果 ...
  • 前言 上一篇文章主要介紹了IL的概念以及基礎的示例代碼,在這一篇文章中我們將通過對象調用看IL。 創建對象與調用方法 class Program { static void Main(string[] args) { var obj = new MyClass(); Console.WriteLin ...
  • abp版本5.9 概述 數據遷移無非就是兩件事情,1、創建資料庫,並根據實體創建對應的表;2、添加一些初始數據 abp的數據遷移也是完成這兩件事,比較特殊的是它是多租戶saas系統,而且支持不同的租戶有獨立的資料庫。所以abp中的遷移要先遷移戶主Host,再遷移租戶Tenant的資料庫 它的遷移定義 ...
  • 本文屬於OData系列 目錄 武裝你的WEBAPI-OData入門 武裝你的WEBAPI-OData便捷查詢 武裝你的WEBAPI-OData分頁查詢 武裝你的WEBAPI-OData資源更新Delta 武裝你的WEBAPI-OData之EDM 武裝你的WEBAPI-OData常見問題 武裝你的WE ...
  • 前言 面試總是會被問到有沒有用過分散式鎖、redis 鎖,大部分讀者平時很少接觸到,所以只能很無奈的回答 “沒有”。本文通過 Spring Boot 整合 redisson 來實現分散式鎖,並結合 demo 測試結果。 首先看下大佬總結的圖 正文 添加依賴 <!--redis--> <depende ...