整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
javascript復制代碼 class Person extends React.Component {
render() {
const { name, age, sex }=this.props;
return (
<ul>
<li>姓名：{name}</li>
<li>年齡：{age + 1}</li>
<li>性別：{sex}</li>
</ul>
)
}
}
ReactDOM.render(<Person name="jerry" age={19} sex="男" dance={dance} />, document.getElementById('test1'))
ReactDOM.render(<Person name="Lilly" age={18} sex="女" />, document.getElementById('test2'))
ReactDOM.render(<Person name="雙下巴" age={23} sex="不明" />, document.getElementById('test3'))go復制代碼 //對標簽屬性進行類型、必要性的限制
Person.propTypes={
name: PropTypes.string.isRequired,
sex: PropTypes.string,
age: PropTypes.number,
dance: PropTypes.func
}. 性別為字符串類型，如果性別沒有指定，默認為男 Person.defaultProps={ sex: '未知', age: 18 } 3. 年齡為數字類型，必須指定 4. 給某個組件添加dance函數，限制dance只能是函數類型
javascript復制代碼ReactDOM.render(<Person name="jerry" age={19} sex="男" dance={dance} />, document.getElementById('test1'))
function dance() {
console.log(' be good at dancing')
}
Person.propTypes={
dance: PropTypes.func
}在函數的render函數中打印console.log(this)，可以查看渲染數據的結果
注意可以運算不可以修改。運算和修改的區別如圖所示
在render函數里面
arduino
復制代碼console.log(this.props.name)kotlin復制代碼 constructor(props) {
super(props)
this.state={ 屬性:值}
// 解決changeWeather中this指向的問題
this.組件實例新屬性名稱=this.自定義函數.bind(this)
}xml復制代碼 <div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 生產環境中不建議使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
class Person extends React.Component {
render() {
console.log(this)
const { name, age, sex }=this.props
return (
<ul>
<li>姓名：{name}</li>
<li>年齡：{age}</li>
<li>性別：{sex}</li>
</ul>
)
}
}
ReactDOM.render(<Person name="jerry" age="19" sex="男" />, document.getElementById('test1'))
ReactDOM.render(<Person name="Lilly" age="18" sex="女" />, document.getElementById('test2'))
ReactDOM.render(<Person name="雙下巴" age="23" sex="不明" />, document.getElementById('test3'))
</script>運行截圖
花括號加展開運算符接收數據
復制代碼{...數組或者集合}介紹一下展開運算符
javascript復制代碼 let arr1=[1, 3, 5, 7, 9]
let arr2=[1, 2, 3, 4]
console.log(...arr1);//展開一個數組
let arr3=[...arr1, ...arr2]//連接數組
console.log('arr3:', arr3)
function sum(...numbers) {
return numbers.reduce((preValue, currentValue)=> {
return preValue + currentValue
})
}
console.log(sum(1, 2, 3, 4));//10
ini復制代碼 let person={ name: 'tom', age: 18 }
console.log(...person);展開運算符不能展開對象報錯信息 Uncaught TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function 展開運算符不能展開對象。
對傳遞的標簽屬性進行類型限制，必要性限制和默認設置。React15使用以下代碼進行標簽屬性限制
ini復制代碼 Person.propTypes={
name: React.PropTypes.string
}React16版本及其以后不再從React身上直接取屬性，因為這樣可能會使得React變得臃腫。使用prop-types.js，然后
xml
復制代碼<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>如果想要把標簽屬性的限制和默認值相關代碼放在組件類的內部，可以嘗試下面的寫法(寫在組件里面，和render函數是并列關系)
yaml復制代碼static propTypes={
name: PropTypes.string.isRequired,
sex: PropTypes.string,
age: PropTypes.number,
dance: PropTypes.func
};
static defaultProps={
sex: '未知',
age: 18
}測試這段代碼是否可行，可以將渲染組件到頁面的代碼去掉性別，dance直接賦值，如果生效會顯示關于屬性限制的相關的報錯
通常在React中，構造函數僅用于以下兩種情況
通過給this.state賦值對象來初始化內部state
為事件處理函數綁定實例
構造器是否接收props，是否傳遞給super取決于是否希望在構造器上通過this訪問props
undefined打印了三次是因為頁面中有三次渲染
最新的React建議使用函數式組件而不是類式組件。 this.state.x,this.props.name中的this是組件實例對象，函數式組件中沒有this，不能state，refs,但是可以props
xml復制代碼 <script type="text/babel">
function Predecessor() {
const { name, age, address }=props
return (
<ul>
<li>name:{name}</li>
<li>age:{age}</li>
<li>address:{address}</li>
</ul>
)
}
ReactDOM.render(<Predecessor name='LS' age='18' address='Mars' />, document.getElementById('demo1'))
</script>props未定義的原因是沒有在函數的參數里接收props
上面代碼中從函數參數中讀取屬性也可以寫解構的形式
css復制代碼 function Predecessor({ name, age, address }) {
return (
<ul>
<li>name:{name}</li>
<li>age:{age}</li>
<li>address:{address}</li>
</ul>
)
}代碼的解構和從函數參數中讀取屬性是等價的。注意不要忘記花括號，因為屬性的集合是一個對象。
對函數式組件屬性的限制寫在function外部。
最新版的React建議使用函數式組件，所以函數式組件使用props值得關注。
果你一直在閱讀有關"props"內容，你會發現我們可能也一直在使用它們（即使沒有意識到），但也許你并不完全確定它們是什么。或者如何正確使用它們，并充分利用它們。
當你讀完這篇指南時，你就會知道成為一名高效的Vue開發者所需要知道的關于props的一切。
在本指南中，我們將介紹關于 props 的最重要的事情:
props 是我們在不同組件之間傳遞變量和其他信息的方式。這類似于在 JS 中，我們可以將變量作為參數傳遞給函數:
這里，我們將變量myMessage作為參數message傳遞給函數。在函數內部，我們可以將該值作為message訪問。
props的工作原理與此非常相似。我們將props傳遞給另一個組件，然后該組件可以使用該值。但是首先需要了解一些規則。
在處理props時，有兩件事需要特別注意：
Vue 使用單向數據流，這意味著數據只能從父組件流向子組件，不能將數據從子對象傳遞到父對象。因為父組件“擁有”它傳遞的值，所以子組件不能修改它。如果只允許一個組件更改它，那么跟蹤bug就更容易了，因為我們確切地知道應該從哪里查找。
在開發確保沒有違反這兩條規則，開發就會變得更容易些，出問題也比較好找原因。接著來看看如何將 props 從一個組件傳遞到另一個組件。
如果希望將值從組件傳遞到子組件，這與添加HTML屬性完全相同。
<template>
<Camera
name="Sony A7RIV"
img="../sony-a7riv.jpg"
/>
</template>Camera組件將使用name和img props 來渲染自身頁面。內容大概如下：
<template>
<div class="camera">
<h2 class="camera__name">{{ name }}</h2>
<img class="camera__image" :src="img" />
</div>
</template>在這里，我們將name渲染到h2標記中，并使用img設置img標記上的src屬性。
但是，如果我們將此信息存儲在某個位置的變量中怎么辦？
為此，我們需要使用稍微不同的語法，因為我們希望使用 JS 表達式而不是傳遞字符串。
<template>
<Camera
v-bind:name="cameraName"
v-bind:img="cameraImage"
/>
</template>v-bind:name="cameraName"行告訴Vue將 JS 表達式cameraName綁定到 propname。JS 表達式是 JS 的任何代碼段。可能是像我們在此處這樣的變量名，或更復雜的名稱。
還可以使用邏輯或 img 設置圖像路徑：
<template>
<Camera
v-bind:name="cameraName"
v-bind:img="cameraImage || '../no-camera-found.jpg'"
/>
</template>v-bind 可以用簡寫形式 :
<template>
<Camera
:name="cameraName"
:img="cameraImage || '../no-camera-found.jpg'"
/>
</template>在此代碼實際起作用之前，我們需要獲取Camera組件才能實際收聽props。默認情況下，組件會忽略它們。為此，我們必須在組件定義中添加一個props部分：
export default {
name: 'Camera',
props: ['name', 'img'],
}通常不建議這么寫，應該為props對象指定類型：
export default {
name: 'Camera',
props: {
name: {
type: String,
},
img: {
type: String,
}
}
}通過從數組到對象，我們可以指定更多的 props 細節，比如類型。我們為什么要向props 添加類型？
在Vue中，props 可以有很多不同的類型：
通過添加類型，我們可以設置我們期望收到的數據類型。如果我們將camera的props中的name設置為true，它將無法正常工作，因此Vue會警告我們使用錯誤。
接著添加一個rating到我們的Camera組件中，該 rating 類型為 Number:
export default {
name: 'Camera',
props: {
name: {
type: String,
},
img: {
type: String,
},
rating: {
type: Number,
},
}
}然后在 template 中顯示 rating:
<template>
<div class="camera">
<h2 class="camera__name">{{ name }}</h2>
<span class="camera__rating">{{ rating }}</span>
<img class="camera__image" src="img" />
</div>
</template>在外層調用：
<template>
<Camera
name="Sony A7RIV"
img="../sony-a7riv.jpg"
:rating="9"
/>
</template>不是所有的 props 都是一樣的，為了使組件正常工作，其中一些要求必填的。
對于我們的Camera組件，我們肯定需要一個name，但 img 和 rating 不是必需的。
export default {
name: 'Camera',
props: {
name: {
type: String,
required: true,
},
img: {
type: String,
},
rating: {
type: Number,
},
}
}通過設置 required: true 要求我們的 name 是必需要傳入的，相反，required 為false 對應的props可傳可不傳。
對于不是每次都傳入的 props，我們可以為其，添加默認值。
export default {
name: 'Camera',
props: {
name: {
type: String,
required: true,
},
img: {
type: String,
default: '../no-camerage-found.jpg',
},
rating: {
type: Number,
},
}
}前面我們通過邏輯或為img添加默認值，這次我們使用 default 屬性為img設置默認值。
同樣也需要為我們的rating設置默認值。如果沒有設置也沒有從外部傳入，我們訪問的時候就會得到undefined，這可能會給我們帶來一些問題
雖然能夠在template中使用props很棒，但是真正強大的功能來自于在方法、計算屬性和組件中在使用其他 JS 中使用它們。
在我們的template中，我們看到我們只需要props名稱，例如：{{rating}}。但是，在Vue組件的其他任何地方，我們都需要使用this.rating訪問我們的props。
讓我們重構應用程序，以便為圖像使用標準的URL結構。這樣，我們不必每次都將其傳遞給Camera組件，而只需從名稱中找出即可。
我們將使用以下結構：./images/cameras/${cameraName}.jpg
因此，如果 camera 是Sony A6400，則URL將變為./images/cameras/Sony%20A6400.jpg。％20來自對空格字符的編碼，因此我們可以在URL中使用它。
首先，我們將移除不再需要的img props
export default {
name: 'Camera',
props: {
name: {
type: String,
required: true,
},
rating: {
type: Number,
default: 0,
},
}
}然后，我們將添加一個計算屬性，該屬性將為我們生成圖像URL：
并非所有字符都可以在URL中使用，因此encodeURIComponent會為我們轉換這些字符。
因為我們可以使用與常規props相同的方式來訪問此計算 props，所以我們根本不需要更改模板，并且模板可以像以前一樣保持不變：
<template>
<div class="camera">
<h2 class="camera__name">{{ name }}</h2>
<span class="camera__rating">{{ rating }}</span>
<img class="camera__image" src="img" />
</div>
</template>樣，您可以在以下位置使用組件的props：
以及組件定義中的其他任何地方！
以上，這些是關于 props 的知識點，但是，總會有更多東西要學習。Vue 也是一個永無止境的學習過程。keep going !
作者：Michael Thiessen 譯者：前端小智 來源：Michael原文：https://reactgo.com/vuejs-props-tutorial/
.傳遞數據
1.props 傳入單數據
就像 data 一樣，prop 可以用在模板內,同樣也可以在 vm 實例中像“this.message”這樣使用
<child message="hello! Prop"></child>
2.props 傳入多個數據
如果在父組件的模板類添加其他元素或者字符會有：
①在最前面加入—每個子組件渲染出來都會在其前面加上
②在最后面加入—每個子組件渲染出來都會在其后面加上
③在中間加入—他前面子組件后面加上，后面的子組件后面加上
（1）1種
<template>
<div id="app">
<child msg="hello!"></child>
<child nihao="hello1!"></child>
<child nisha="hello2!"></child>
</div>
</template>
<script>
import Vue from 'vue';
Vue.component('child', {
props: ['msg','nihao','nisha'],
template: '<span>{{ msg }}{{nihao}}{{nisha}}</span>',
});
export default {
name: 'app',
data: function () {
return {
}
}
}
</script>
（2）2種
template: '<span>小明，{{ msg }}{{nihao}}{{nisha}}</span>',
（3）3種
template: '<span>{{ msg }}{{nihao}}{{nisha}}小明</span>',
（4）4種
template: '<p>{{ msg }}小明 {{nihao}} {{nisha}}小林</p>',
注意：camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名：
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>
二.動態prop
要動態地綁定父組件的數據到子模板的 props，與綁定到任何普通的HTML特性相類似，就是用 v-bind。每當父組件的數據變化時，該變化也會傳導給子組件
<template>
<div id="app">
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>
</template>
<script>
import Vue from 'vue';
export default {
name: 'app',
data: function () {
return {
title: '使用 Prop 傳遞數據',
parentMsg: 'Message from parent'
}
},
components: {
child: {
props: ['myMessage'],
template: '<span>{{myMessage}}</span>'
}
}
}
</script>
三.表達式計算，傳遞值
如果想傳遞一個實際的 number，需要使用 v-bind，從而讓它的值被當作 JavaScript 表達式計算
<comp v-bind:some-prop="1"></comp>
<template>
<div id="app">
<p>{{tle1}}:<comp total="123+456"></comp></p>
<p>{{tle2}}<comp :total="123+456"></comp></p>
</div>
</template>
<script>
import Vue from 'vue';
Vue.component("comp", {
props: ["total"],
template: "<span>total: {{total}}</span>",
});
export default {
name: 'app',
data: function () {
return {
tle1: '這里傳遞是字符串',
tle2: '用了v-bind動態語法，傳遞值會通過js的表達式計算，得到個值：'
}
}
}
</script>
四.Prop類型綁定
prop 默認是單向綁定：當父組件的屬性變化時，將傳導給子組件，但是反過來不會。這是為了防止子組件無意修改了父組件的狀態——這會讓應用的數據流難以理解。
五.prop驗證
傳入的數據不符合規格，Vue 會發出警告。當組件給其他人使用時，這很有用。
<template>
<div id="app">
<div>name:{{dr.name}}, age:{{dr.age}}.<input v-model="telphone" /> </div>
<br /><br />
<div>
<span>vue自定義組件</span><br />
<child :msg_null="123+456" msg_string="adss"
:msg_number="0" :msg_twoway.sync="telphone"
:msg_validate="mobilephone"
:msg_number2String="mobilephone"
:msg_obj2json="dr"
:msg_json2obj="drJson"></child>
</div>
</div>
</template>
<script>
import Vue from 'vue';
Vue.component("child", {
props: {
msg_null: null,//基礎類型檢測("null"意思是任何類型都可以)
msg_string: { //String類型，必須是定義過的，可以是空字符串""
type: String,
required: true,
},
msg_number: {//Number類型，默認值100
type: Number,
default: 100,
},
msg_obj: {//Object類型，返回值必須是js對象
type: Object,
default: function() {
return {
name: "DarkRanger",
age: "18",
}
}
},
msg_twoway: { //指定這個prop為雙向綁定,如果綁定類型不對將拋出一條警告
type: String,
twoWay: true,
},
msg_validate: { //自定義驗證，必須是Number類型，驗證規則：大于0
type: Number,
validator: function(val) {
return val > 0;
}
},
msg_number2string: { //將值轉為String類型,在設置值之前轉換值(1.0.12+)
coerce: function(val) {
return val + ""
}
},
msg_obj2json: { //js對象轉JSON字符串
coerce: function(obj) {
return JSON.stringify(obj);
}
},
msg_json2obj: {//JSON轉js對象
coerce: function(val) {
return JSON.parse(val);
}
},
},
template: '<div><b>msg_null=123+456=</b> {{msg_null}}</br>
</br><b>msg_string="1":</b>{{msg_string}}</br></br><b>msg_number:</b> {{msg_number}}</br>
</br><b>msg_obj:</b>{{"name-->"+msg_obj.name+", age-->"+msg_obj.age}}</br>
</br><b>msg_twoway:</b><input v-model="msg_twoway"></br></br><b>msg_validate:</b>{{msg_validate}}</br>
</br><b>msg_number2String:</b> {{msg_number2string}}</br></br><b>msg_obj2json:</b> {{msg_obj2json}}</br>
</br><b>msg_json2obj:</b>{{"name: "+msg_json2obj.name+"; age: "+msg_json2obj.age}}</div>'
});
export default {
name: 'app',
data: function () {
return {
telphone: "0356-1234567",
mobilephone: 15912345678,
dr: {
name: "DarkRanger",
age: 25
},
drJson: {"name":"DarkRanger","age":25}
}
}
}
</script>
解釋：
①、msg_null：不論什么數據類型，只要能解析成功，就渲染成正確的html
②、msg_string：只能傳遞String類型的字符串，如果將child06中的“msg_string="this is string"”更改為“:msg_string="1+2"”,
控制臺報錯：
③、msg_number：如果在child06標簽中沒有定義值，我們將會取默認值100，現在定義了“:msg_number="99"”，如果將“:msg_number="99"”更改為“msg_number="99"”，控制臺報錯：
④、msg_obj：在js中我們定義的msg_obj的default屬性是一個具有返回js對象的函數，這里取值的時候直接取的就是返回值，如果在child06中定義或者綁定了新的js對象，則會將msg_obj更新為新的數據。取js對象屬性值的時候用{{Object.prop}}取值即可。
⑤、msg_twoway：雙向數據綁定，在測試的過程中發現，即使設置“twoWay: true”，當子組件發生變化時，vue實例的數據并不會更新，還是單向的數據綁定，這里我將child06中原先的“:msg_twoway="telphone"”更改為“:msg_twoway.sync="telphone"”，保證測試能夠數據雙向綁定。
⑥、msg_validate：有驗證規則的組件數據，這里定義的規則是當前數值必須大于0，如果將child06中的“:msg_validate="mobilephone"”更改為“:msg_validate="-1"”。控制臺報錯：
⑦、msg_number2string：在結果賦值之前將數值轉化為字符串。
⑧、msg_obj2json：vue.js內置了JSON的兩個方法，一個是JSON.parse(jsonStr)--》將JSON字符串轉化為js對象，另外一個是JSON.stringify(obj)--》將js對象序列化為JSON字符串。
這里是將obj轉化為json字符串，需要添加coerce屬性，它是一個具有返回json字符串的函數，當然不是必須得用JSON.stringify(obj)方法，只要方法合理，能夠轉化為json能夠識別的字符串即可。
⑨、msg_json2obj: 將json字符串轉化為js對象。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
