vuejs使用 Props 傳遞資料
使用 Props 傳遞資料
元件例項的作用域是孤立的。這意味著不能並且不應該在子元件的模板內直接引用父元件的資料。可以使用 props 把資料傳給子元件。
“prop” 是元件資料的一個欄位，期望從父元件傳下來。子元件需要顯式地用 props 選項 宣告 props：
?| 1 2 3 4 5 6 7 |
Vue.component('child', {
// 宣告 props
props: ['msg'],
// prop 可以用在模板內
// 可以用 `this.msg` 設定
template:
'<span>{{ msg }}</span>'
})
|
然後向它傳入一個普通字串：
<child msg="hello!"></child>
舉例
錯誤寫法：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html>
<html
lang="en">
<head>
<script
type="text/javascript"
src="./vue.js"></script>
<meta
charset="UTF-8">
<title>vue.js</title>
</head>
<body>
<pre>
//使用 props 傳輸資料予子元件
//props , data 重複名稱會出現錯誤
</pre>
<div
id="app1">
<child
mssage="hello!"></child>
</div>
<script>
Vue.config.debug = true;
Vue.component('child', {
// declare the propsprops: ['msg','nihao','nisha'],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>',
data: function() {
return {
mssage: 'boy'
}
}
});
var vm = new Vue({
el: '#app1'
})
</script>
</body>
</html>
|
正確寫法：
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html>
<html
lang="en">
<head>
<script
type="text/javascript"
src="./vue.js"></script>
<meta
charset="UTF-8">
<title>vue.js</title>
</head>
<body>
<pre>
//使用 props 傳輸資料予子元件
//props , data 重複名稱會出現錯誤
</pre>
<div
id="app1">
<child
mssage="hello!"></child>
</div>
<script>
Vue.config.debug = true;
Vue.component('child', {
// declare the props
props: ['msg','nihao','nisha'],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>'
});
var vm = new Vue({
el: '#app1'
})
</script>
</body>
</html>
|
props 傳入多個數據（順序問題）
第一種：
HTML
?| 1 2 3 4 5 |
<div
id="app1">
<child
msg="hello!"></child>
<child
nihao="hello1!"></child>
<child
nisha="hello2!"></child>
</div>
|
JS
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Vue.config.debug =
true;
Vue.component('child', {
// declare the props
props: ['msg','nihao','nisha'],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>',
/*data: function() {
return {
msg: 'boy'
}
}*/
});
var
vm = new Vue({
el: '#app1'
})
|
結果：hello! hello1! hello2!
第二種：
HTML
?| 1 2 3 4 5 |
<div
id="app1">
<child
msg="hello!"></child>
<child
nihao="hello1!"></child>
<child
nisha="hello2!"></child>
</div>
|
JS
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Vue.config.debug =
true;
Vue.component('child', {
// declare the props
props: ['msg','nihao','nisha'],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: '<span>123{{ msg }}{{nihao}}{{nisha}}</span>',
/*data: function() {
return {
msg: 'boy'
}
}*/
});
var
vm = new Vue({
el: '#app1'
})
|
結果：123hello! 123hello1! 123hello2!
第三種：
HTML
?| 1 2 3 4 5 |
<div
id="app1">
<child
msg="hello!"></child>
<child
nihao="hello1!"></child>
<child
nisha="hello2!"></child>
</div>
|
JS
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Vue.config.debug =
true;
Vue.component('child', {
// declare the props
props: ['msg','nihao','nisha'],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: '<span>{{ msg }}{{nihao}}{{nisha}}123</span>',
/*data: function() {
return {
msg: 'boy'
}
}*/
});
var
vm = new Vue({
el: '#app1'
})
|
結果：hello! 123 hello1! 123 hello2!123
第四種：
HTML
?| 1 2 3 4 5 |
<div
id="app1">
<child
msg="hello!"></child>
<child
nihao="hello1!"></child>
<child
nisha="hello2!"></child>
</div>
|
JS
?| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Vue.config.debug =
true;
Vue.component('child', {
// declare the props
props: ['msg','nihao','nisha'],
// the prop can be used inside templates, and will also
// be set as `this.msg`
template: '<span>{{ msg }}123{{nihao}}{{nisha}}123</span>',
/*data: function() {
return {
msg: 'boy'
}
}*/
});
var
vm = new Vue({
el: '#app1'
})
|
結果：hello! 123 123hello1! 123hello2!
結論：
在props 中傳入多個數據是，如果在父元件的模板類新增其他元素或者字元會有：
1-在最前面加入—每個子元件渲染出來都會在其前面加上
2-在最後面加入—每個子元件渲染出來都會在其後面加上
3-在中間加入—他前面子元件後面加上，後面的子元件後面加上
關於vue.js元件的教程，請大家點選專題vue.js元件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援指令碼之家。
相關推薦
vuejs使用 Props 傳遞資料
使用 Props 傳遞資料 元件例項的作用域是孤立的。這意味著不能並且不應該在子元件的模板內直接引用父元件的資料。可以使用 props 把資料傳給子元件。 “prop” 是元件資料的一個欄位，期望從父元件傳下來。子元件需要顯式地用 props 選項 宣告 props：
Vue使用props傳遞資料
1. Vue使用props傳遞資料 元件不僅僅是用來進行內容的複用，更重要的是元件之間的要進行通訊。通常父元件的模板中包含子元件，父元件要正向的向子元件傳遞資料或引數，子元件接受到後根據引數額不同來渲染不同的內容或執行操作。這個正向傳遞的過程就是通過props來實現的。 在元件中，
props傳遞資料
一.傳遞資料 1.props 傳入單資料 就像 data 一樣，prop 可以用在模板內,同樣也可以在 vm 例項中像“this.message”這樣使用 <template> <div id="app"> <h1>{{title}}</h
Vue元件： 自定義元件props傳遞資料
一、new一個Vue 二、Vue中使用自定義元件需要先註冊元件 註冊元件（其實就是定義元件）：可以註冊全域性元件，也可以註冊區域性元件。 三、btn是傳引數的，在使用組建的時候可以傳入不同的引數。 <body> <div id="app
餓了麼專案---6、使用Props傳遞資料
一、使用Prop的場景與意義 元件例項的作用域是孤立的。這意味著不能 (也不應該) 在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料，我們需要通過子元件的 props 選項。 子元件
關於Vue.js的元件化，使用props傳遞資料
元件化是Vue.js的重要組成部分。對於一個工程量很大的專案，元件化是重中之重。 剛剛入手Vue，感覺Vue的元件化非常棒。 主要是記錄下自己學的過程中遇到的問題與解決。 構成元件： 元件意味著協同工作，通常父子元件會是這樣的關係：元件 A 在它的模版中使用了元件 B 。它
Vue.js學習筆記：props傳遞資料
一.傳遞資料 1.props 傳入單資料 就像 data 一樣，prop 可以用在模板內,同樣也可以在 vm 例項中像“this.message”這樣使用 <template> <div id="app"> <h1>{{
Vue 元件之使用props傳遞資料
元件不僅僅是要把模板的內容進行復用，更重要的是元件間的通訊。通常父元件的模板中包含子元件，父元件要正向的向子元件傳遞資料或者引數，子元件接收到後根據引數的不同來進行對應的渲染。這個正向的資料傳遞在vue元件中就是通過props來實現的。 在元件中，我們首先需要
Vue2.0使用props傳遞資料---6
<body> <div id = 'app'> <div> <h3>正常的資料</h3> <p>
react之傳遞資料的幾種方式props傳值、路由傳值、狀態提升、redux、context
react之傳遞資料的幾種方式 1、父子傳值 父傳值：<子的標籤 value={'aaa'} index={'bbb'}></子的標籤> 子接值：<li key={this.props.index}>{this.props.value}</li>
Vuejs 為元件傳遞資料
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i
詳解vue2父元件傳遞props非同步資料到子元件的問題
案例一父元件parent.vue?12345678910111213141516171819202122232425262728// asyncData為非同步獲取的資料，想傳遞給子元件使用<template><div>父元件<child :ch
vue中props（父組傳遞資料給子元件）的使用
通過props關鍵字可以傳遞字串、數字、布林、陣列、物件、函式 方式一： 在子元件中用 props關鍵字，後面的每個資料表示的是父元件給子元件要傳遞的值，其值的資料型別由父元件定義 props: ['isShowDialog', 'ste
使用 props 傳遞數據
script help add dex pac mss 聲明 ner har 組件實例的作用域是孤立的。這意味著不能並且不應該在子組件的模板內直接引用父組件的數據。可以使用 props 把數據傳給子組件。 “prop” 是組件數據的一個字段，期望從父組件傳下來。子組件需要顯
vue 通過props傳遞圖片src給子組件
csdn details pro ets http log sset TP AC 用props傳遞一張圖片的src給子組件，發現在子組件中根本加載不到圖片，打開控制臺，發現img的src並沒有被解析成正確的地址 經過研究發現，如果圖片是在static文件夾下，可以直接傳遞，
vue高階屬性 provide/inject，父元件向子元件或父元件的子元件的子元件...傳遞資料
官網說明：provide 和 inject 主要為高階外掛/元件庫提供用例。並不推薦直接用於應用程式程式碼中 以允許一個祖先元件向其所有子孫後代注入一個依賴，不論元件層次有多深，並在起上下游關係成立的時間裡始終生效。 provide 選項應該是一個物件
ajax向springmvc的Controller傳遞資料
json資料轉換 為了實現瀏覽器與控制器類（controller)之間的資料互動，Spring提供了一個HttpMessageConverter<T>介面來完成此項工作。該介面主要用於將請求資訊中的資料轉換為一個型別為T的物件，並將型別為T的物件繫結到請求方法的引數中，或者將物件轉換
asp.net MVC從後端傳遞資料到前端的幾種資料形式:ViewBag,ViewData,Model
參考:https://blog.csdn.net/xiaouncle/article/details/77825389 在以上文章的基礎上做點相關補充。 1.ViewBag是一個動態欄位，而ViewData是一個字典 首先看後臺程式碼： public ActionResult T
Intent傳遞資料重複問題
Android解決Intent中的資料重複問題 轉載地址：http://www.cnblogs.com/anrainie/articles/2383941.html 最近在研究Android，遇到了一些Notification(通知)的問題： 1、Notification如何傳遞引數
localStorge----前端頁面跳轉傳遞資料，無需互動
需求 有時候我們想僅僅在前端頁面href跳轉到另一個頁面，不用後臺互動，但是想傳一些資料給新頁面顯示（僅前端實現）。 案例 例如這些顯示不全的單元格資訊，想要點選開啟一個新網頁詳細顯示，但是不會再和後臺互動那麼麻煩。 解決方法 — localStorge 使用l