Vuejs——（9）元件——props資料傳遞

本篇資料來於官方文件：

http://cn.vuejs.org/guide/components.html#Props

本文是在官方文件的基礎上，更加細緻的說明，程式碼更多更全。

簡單來說，更適合新手閱讀

（二十六）props資料傳遞

①元件例項的作用域：

是孤立的，簡單的來說，元件和元件之間，即使有同名屬性，值也不共享。

<divid="app">
<add></add>
<del></del>
</div>
<script>
var vm

= new Vue({
el: '#app',
components: {
"add": {
template: "<button>btn：{{btn}}</button>",
data: function () {
return {btn: "123"};
}
},
del: {
template: "<button>btn：{{btn}}</button>",
data: function () {
return {btn: "456"};
}
}
}
});
</script>

渲染結果是：

2個按鈕，第一個的值是123，第二個的值是456（雖然他們都是btn）

②使用props繫結靜態資料：

【1】這種方法用於傳遞字串，且值是寫在父元件自定義元素上的。

【2】下面示例中的寫法，不能傳遞父元件data屬性中的值

【3】會覆蓋模板的data屬性中，同名的值。

示例程式碼：

<divid="app">
<addbtn="h"></add>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
h: "hello"
},
components: {
"add": {
props: ['btn'],
template: "<button>btn：{{btn}}</button>",
data: function () {
return {btn: "123"};
}
}
}
});
</script>

這種寫法下，btn的值是h，而不是123，或者是hello。

【4】駝峰寫法

假如插值是駝峰式的，

而在html標籤中，由於html的特性是不區分大小寫（比如LI和li是一樣的），因此，html標籤中要傳遞的值要寫成短橫線式的（如btn-test），以區分大小寫。

而在props的陣列中，應該和插值保持一致，寫成駝峰式的（如btnTest）。

例如：

[javascript] view plain copy

props: ['btnTest'],
template: "<button>btn：{{btnTest}}</button>",

正確的寫法：

<addbtn-test="h"></add>

假如插值寫短橫線式，或者是html標籤寫成駝峰式，都不能正常生效。（除非插值不寫成駝峰式——跳過大小寫的限制，才可以）

③利用props繫結動態資料：

簡單來說，就是讓子元件的某個插值，和父元件的資料保持一致。

標準寫法是（利用v-bind）：

<add v-bind:子元件的值="父元件的屬性"></add>

如程式碼

<divid="app">
<addv-bind:btn="h"></add>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
h: "hello"
},
components: {
"add": {
props: ['btn'],
template: "<button>btn：{{btn}}</button>",
data: function () {
return {'btn': "123"}; //子元件同名的值被覆蓋了
}
}
}
});
</script>

說明：

【1】btn使用的父元件data中 h的值；

【2】子元件的data的函式中返回值被覆蓋了。

【3】也就是說，使用v-bind的是使用父元件的值（根據屬性名），沒有使用v-bind的是將標籤裡的數值當做字串來使用。

【4】依然需要使用props，否則他會取用自己data裡的btn的值

④字面量和動態語法：

【1】簡單來說，不加v-bind的，傳遞的是字面量，即當做字串（例如1也是字串，而不是number型別）；

【2】加上v-bind的，傳遞的是JS表示式（因此才能傳遞父元件的值）；

【3】加上v-bind後，如果能找到父元件的值，那麼使用父元件的值；如果沒有對應的，則將其看做一個js表示式（例如1+2看做3，{a:1}看做是一個物件）；

如程式碼：

<divid="app">
<addv-bind:btn="1+2"></add>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
h: "hello"
},
components: {
"add": {
props: ['btn'],
template: "<button>btn：{{btn}}</button>"
}
}
});
相關推薦

Vuejs——（9）元件——props資料傳遞

本篇資料來於官方文件： http://cn.vuejs.org/guide/components.html#Props 本文是在官方文件的基礎上，更加細緻的說明，程式碼更多更全。簡單來說，更適合新手閱讀（二十六）props資料傳遞 ①元件例項的作用域：

Vuejs——（11）元件——slot內容分發

本篇資料來於官方文件： http://cn.vuejs.org/guide/components.html#u4F7F_u7528_Slot__u5206_u53D1_u5185_u5BB9 本文是在官方文件的基礎上，更加細緻的說明，程式碼更多更全。簡單來說，更適合新手閱讀

每日一python（9）：基礎資料結構 ---- 元組

Tuple是Python內建的另一種資料型別，元組。Tuple也是一種有序的集合，tuple和list非常類似，但是tuple一旦初始化就不能修改。比如：同樣是列出同學的名字，如下： >>> classmates = ('Bob', 'Tract', 'Jac

Flutter學習筆記（9）--元件Widget

如需轉載，請註明出處：Flutter學習筆記（9）--元件Widget 在Flutter中，所有的顯示都是Widget，Widget是一切的基礎，我們可以通過修改資料，再用setState設定資料（呼叫setState()來通知框架，框架會再次呼叫State的構建方法來更新使用者介面），Flutter會自動

React躬行記（9）——元件通訊

　　根據元件之間的巢狀關係（即層級關係）可分為4種通訊方式：父子、兄弟、跨級和無級。一、父子通訊　　在React中，資料是自頂向下單向流動的，而父元件通過props向子元件傳遞需要的資訊是元件之間最常見的通訊方式，如下程式碼所示，父元件Parent向子元件Child傳遞了一個name屬性，其值為一段字

小白學 Python（9）：基礎資料結構（列表）（上）

人生苦短，我選Python 前文傳送門小白學 Python（1）：開篇小白學 Python（2）：基礎資料型別（上）小白學 Python（3）：基礎資料型別（下）小白學 Python（4）：變數基礎操作小白學 Python（5）：基礎運算子（上）小白學 Python（6）：基礎運算子（下）

React學習（二）——元件的運用和資料傳遞

大家好，我是凱文，本篇文章主要圍繞React框架的元件以及元件之間資料的傳遞展開，並通過例項來實現特定的功能。下面先來簡單介紹一下React的元件，由本人學習實踐所得，用於做筆記，僅供參考。      React框架的一大特色就是它通過元件化的方式來構建和渲染前端頁面，瞭解

Vue 爬坑之路（二）—— 元件之間的資料傳遞

Vue 的元件作用域都是孤立的，不允許在子元件的模板內直接引用父元件的資料。必須使用特定的方法才能實現元件之間的資料傳遞。首先用 vue-cli 建立一個專案，其中 App.vue 是父元件，components 資料夾下都是子元件。一、父元件向子元件傳遞資料

React學習（2）—— 元件的運用和資料傳遞

React官方中文文件地址：    https://doc.react-china.org/ 瞭解了元件之後，就需要理解“Props”和“State”的用法。首先來介紹State，State按照字面意思理解為狀態，其代表著元件本身的屬性，S

[Maven實戰]（9）傳遞性依賴

cin jar ace wid cti div track 手動 local 了解Spring的朋友都知道。創建一個Spring Framework項目都須要依賴什麽樣的Jar包。假設不使用Maven，那麽在項目中就須要手動下載相關的依賴。因為Spring Fr

風河虛擬化元件使用說明（9）—— 在目標機上安裝Windows 10系統(on target)

參考Guest Guide文件"Installing Native Windows 7 on the Target" 製作Windows 10的U盤啟動盤：插入Windows 10 U盤啟動盤，開啟工控機，按DEL進入BIO

T-SQL執行內幕（9）——資料訪問

本文屬於SQL Server T-SQL執行內幕系列     在執行樹的葉子端（通常就是圖形化執行計劃每個分支的最右端），一般是實際訪問資料的操作符。當呼叫這些操作符上的next()方法時，會返回表或者索引上的實際資料。資料訪問通常有三類可能的操作

資料結構——圖（9）——拓撲排序與DFS

DAG圖與AOV網一個無環的有向圖稱為有向無環圖（DAG）。圖的頂點可以表示要執行的任務，並且邊可以表示一個任務必須在另一個之前執行的約束; 在這個應用程式中，拓撲排序只是任務的有效序列。當且僅當圖形沒有有向迴圈時，即如果它是有向無環圖（DAG），則可以進行拓撲排序。任何DAG

大資料入門（9）mapreduce計算wordcount的程式編寫

1、外部寫好的程式打Java jar 包，匯入jar sftp> put e:/wc.jar 2、建立文字進行計算 vi words.log hadoop fs -mkdir /wc hadoop fs -mkdir /wc/srcData/ 3、執行jar hadoop ja

Kotlin學習筆記（9）- 資料類

系列文章全部為本人的學習筆記，若有任何不妥之處，隨時歡迎拍磚指正。如果你覺得我的文章對你有用，歡迎關注我，我們一起學習進步！ Kotlin學習筆記（1）- 環境配置 Kotlin學習筆記（2）- 空安全 Kotlin學習筆記（3）- 語法 Ko

藍的成長記——追逐DBA（1）：奔波於路上，挺進山東藍的成長記——追逐DBA（3）：古董上操作，資料匯入匯出成了問題藍的成長記——追逐DBA（8）：重拾SP報告，回憶oracle的STATSPACK實驗藍的成長記— —追逐DBA（9）：國慶漸去，追逐DBA，新規劃，新啟程

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

野生前端的資料結構練習（9）氣泡排序，選擇排序，插入排序

[TOC] 一.氣泡排序 bubble sort的是最基本的演算法，被譽為永遠會被考從來不被用的演算法，基本原則是大數右移，每輪遍歷後最右側的數是最大的，所以下一輪迴圈時可不予考慮，時間複雜度為O（n^2）。 function bubbleSort(arr) { let length = a

python資料結構與演算法（9）

指定位置插⼊節點 def insert(self, pos, item): """在指定位置新增節點""" if pos <= 0:

SSM_CRUD新手練習（9）顯示分頁資料

我們已經做好了用來顯示資料的分頁模板，現在只需要將我們從後臺取出的資料填充好，顯示出來。我們使用<c:forEach>標籤迴圈取出資料，所以需要先匯入JSTL標籤庫 <%@ taglib prefix="C" uri="htt

吳裕雄資料探勘與分析案例實戰（9）——決策樹與隨機深林

# 匯入第三方模組import pandas as pd# 讀入資料Titanic = pd.read_csv(r'F:\\python_Data_analysis_and_mining\\10\\Titanic.csv')print(Titanic.shape)print(Titanic.head())#

Vuejs——（9）元件——props資料傳遞

①元件例項的作用域：

②使用props繫結靜態資料：

③利用props繫結動態資料：

④字面量和動態語法：

相關推薦