整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢(xún)熱線(xiàn):

          React核心屬性props屬性及用法詳解

          React核心屬性props屬性及用法詳解

          件核心屬性-props

          需求:自定義用來(lái)顯示一個(gè)人員信息的組件

          javascript復(fù)制代碼   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'))
          1. 姓名必須指定,且為字符串類(lèi)型
          go復(fù)制代碼           //對(duì)標(biāo)簽屬性進(jìn)行類(lèi)型、必要性的限制
                  Person.propTypes={
                      name: PropTypes.string.isRequired,
                      sex: PropTypes.string,
                      age: PropTypes.number,
                      dance: PropTypes.func
                  }

          . 性別為字符串類(lèi)型,如果性別沒(méi)有指定,默認(rèn)為男 Person.defaultProps={ sex: '未知', age: 18 } 3. 年齡為數(shù)字類(lèi)型,必須指定 4. 給某個(gè)組件添加dance函數(shù),限制dance只能是函數(shù)類(lèi)型

          javascript復(fù)制代碼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
          }

          在函數(shù)的render函數(shù)中打印console.log(this),可以查看渲染數(shù)據(jù)的結(jié)果

          props的性質(zhì)和作用

          1. 每個(gè)組件對(duì)象都會(huì)有props屬性
          2. 組件標(biāo)簽的所有屬性都保存在props中
          3. 通過(guò)標(biāo)簽屬性從組件外向組件內(nèi)傳遞變化的數(shù)據(jù)。
          4. 注意:組件內(nèi)部不要修改props的值

          注意可以運(yùn)算不可以修改。運(yùn)算和修改的區(qū)別如圖所示

          用法

          內(nèi)部讀取某個(gè)屬性值this.props.name

          在render函數(shù)里面

          arduino
          復(fù)制代碼console.log(this.props.name)

          對(duì)props中的屬性值進(jìn)行類(lèi)型限制和必要性限制

          1. 第一種方式(React v15.5開(kāi)始已棄用) Person.propTypes={ name: React.PropTypes.string.isRequired, sex: PropTypes.string, age: PropTypes.number } 若一直在React身上加PropTypes屬性,那么React核心對(duì)象會(huì)很大。
          2. 使用 prop-types庫(kù)對(duì)標(biāo)簽屬性進(jìn)行限制,React代碼打包之后會(huì)更小一些
          3. ini復(fù)制代碼 <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
            <script type="text/babel">
            Person.propTypes = {
            name:PropTypes.string.isRequired,
            sex: PropTypes.string,
            age: PropTypes.number
            }
            </script>
          4. 拓展屬性:將對(duì)象的所有屬性通過(guò)props傳遞 const person3={ name: '雙下巴', age: 23, sex: '不 明' } ReactDOM.render(<Person {...person3} />, document. getElementById('test3'))
          5. 默認(rèn)屬性值 Person.defaultProps={ 屬性:值 }
          6. 類(lèi)式組件類(lèi)中的構(gòu)造函數(shù)
          kotlin復(fù)制代碼  constructor(props) {
                          super(props)
                          this.state={ 屬性:值}
                          // 解決changeWeather中this指向的問(wèn)題
                          this.組件實(shí)例新屬性名稱(chēng)=this.自定義函數(shù).bind(this)
                      }

          props的基本形式

          xml復(fù)制代碼  <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>
              <!-- 生產(chǎn)環(huán)境中不建議使用 -->
              <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>

          運(yùn)行截圖

          批量傳遞props

          花括號(hào)加展開(kāi)運(yùn)算符接收數(shù)據(jù)

          復(fù)制代碼{...數(shù)組或者集合}

          介紹一下展開(kāi)運(yùn)算符

          javascript復(fù)制代碼        let arr1=[1, 3, 5, 7, 9]
                  let arr2=[1, 2, 3, 4]
                  console.log(...arr1);//展開(kāi)一個(gè)數(shù)組
                  let arr3=[...arr1, ...arr2]//連接數(shù)組
                  console.log('arr3:', arr3)
                  function sum(...numbers) {
                      return numbers.reduce((preValue, currentValue)=> {
                          return preValue + currentValue
                      })
                  }
                  console.log(sum(1, 2, 3, 4));//10
          ini復(fù)制代碼     let person={ name: 'tom', age: 18 }
               console.log(...person);展開(kāi)運(yùn)算符不能展開(kāi)對(duì)象

          報(bào)錯(cuò)信息 Uncaught TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function 展開(kāi)運(yùn)算符不能展開(kāi)對(duì)象。

          對(duì)傳遞的標(biāo)簽屬性進(jìn)行類(lèi)型限制,必要性限制和默認(rèn)設(shè)置。React15使用以下代碼進(jìn)行標(biāo)簽屬性限制

          ini復(fù)制代碼        Person.propTypes={
                      name: React.PropTypes.string
                  }

          React16版本及其以后不再?gòu)腞eact身上直接取屬性,因?yàn)檫@樣可能會(huì)使得React變得臃腫。使用prop-types.js,然后

          xml
          復(fù)制代碼<script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

          props的簡(jiǎn)寫(xiě)方式

          如果想要把標(biāo)簽屬性的限制和默認(rèn)值相關(guān)代碼放在組件類(lèi)的內(nèi)部,可以嘗試下面的寫(xiě)法(寫(xiě)在組件里面,和render函數(shù)是并列關(guān)系)

          yaml復(fù)制代碼static propTypes={
              name: PropTypes.string.isRequired,
              sex: PropTypes.string,
              age: PropTypes.number,
              dance: PropTypes.func
          };
          static defaultProps={   
              sex: '未知',
              age: 18
          }

          測(cè)試這段代碼是否可行,可以將渲染組件到頁(yè)面的代碼去掉性別,dance直接賦值,如果生效會(huì)顯示關(guān)于屬性限制的相關(guān)的報(bào)錯(cuò)

          類(lèi)式組件中的構(gòu)造器與props

          通常在React中,構(gòu)造函數(shù)僅用于以下兩種情況

          通過(guò)給this.state賦值對(duì)象來(lái)初始化內(nèi)部state

          為事件處理函數(shù)綁定實(shí)例

          構(gòu)造器是否接收props,是否傳遞給super取決于是否希望在構(gòu)造器上通過(guò)this訪(fǎng)問(wèn)props

          undefined打印了三次是因?yàn)轫?yè)面中有三次渲染

          函數(shù)式組件使用props

          最新的React建議使用函數(shù)式組件而不是類(lèi)式組件。 this.state.x,this.props.name中的this是組件實(shí)例對(duì)象,函數(shù)式組件中沒(méi)有this,不能state,refs,但是可以props

          xml復(fù)制代碼    <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未定義的原因是沒(méi)有在函數(shù)的參數(shù)里接收props

          上面代碼中從函數(shù)參數(shù)中讀取屬性也可以寫(xiě)解構(gòu)的形式

          css復(fù)制代碼 function Predecessor({ name, age, address }) {
                      return (
                          <ul>
                              <li>name:{name}</li>
                              <li>age:{age}</li>
                              <li>address:{address}</li>
                          </ul>
                      )
                  }

          代碼的解構(gòu)和從函數(shù)參數(shù)中讀取屬性是等價(jià)的。注意不要忘記花括號(hào),因?yàn)閷傩缘募鲜且粋€(gè)對(duì)象。

          對(duì)函數(shù)式組件屬性的限制寫(xiě)在function外部。

          最新版的React建議使用函數(shù)式組件,所以函數(shù)式組件使用props值得關(guān)注。

          果你一直在閱讀有關(guān)"props"內(nèi)容,你會(huì)發(fā)現(xiàn)我們可能也一直在使用它們(即使沒(méi)有意識(shí)到),但也許你并不完全確定它們是什么。或者如何正確使用它們,并充分利用它們。

          當(dāng)你讀完這篇指南時(shí),你就會(huì)知道成為一名高效的Vue開(kāi)發(fā)者所需要知道的關(guān)于props的一切。

          在本指南中,我們將介紹關(guān)于 props 的最重要的事情:

          • 什么是 props ?
          • props 的兩個(gè)主要特點(diǎn)
          • 如何將 props 傳遞給其他組件
          • 添加 props 類(lèi)型
          • 添加必填的 props
          • 設(shè)置默認(rèn)值

          什么是 props ?

          props 是我們?cè)诓煌M件之間傳遞變量和其他信息的方式。這類(lèi)似于在 JS 中,我們可以將變量作為參數(shù)傳遞給函數(shù):

          這里,我們將變量myMessage作為參數(shù)message傳遞給函數(shù)。在函數(shù)內(nèi)部,我們可以將該值作為message訪(fǎng)問(wèn)。

          props的工作原理與此非常相似。我們將props傳遞給另一個(gè)組件,然后該組件可以使用該值。但是首先需要了解一些規(guī)則。

          props 的兩個(gè)主要特點(diǎn)

          在處理props時(shí),有兩件事需要特別注意:

          1. props 通過(guò)組件樹(shù)傳遞給后代(而不是向上傳遞)
          2. props 是只讀的,不能修改

          Vue 使用單向數(shù)據(jù)流,這意味著數(shù)據(jù)只能從父組件流向子組件,不能將數(shù)據(jù)從子對(duì)象傳遞到父對(duì)象。因?yàn)楦附M件“擁有”它傳遞的值,所以子組件不能修改它。如果只允許一個(gè)組件更改它,那么跟蹤bug就更容易了,因?yàn)槲覀兇_切地知道應(yīng)該從哪里查找。

          在開(kāi)發(fā)確保沒(méi)有違反這兩條規(guī)則,開(kāi)發(fā)就會(huì)變得更容易些,出問(wèn)題也比較好找原因。接著來(lái)看看如何將 props 從一個(gè)組件傳遞到另一個(gè)組件。

          將 props 傳遞給其他組件

          如果希望將值從組件傳遞到子組件,這與添加HTML屬性完全相同。

          <template>
            <Camera
              name="Sony A7RIV"
              img="../sony-a7riv.jpg"
            />
          </template>

          Camera組件將使用name和img props 來(lái)渲染自身頁(yè)面。內(nèi)容大概如下:

          <template>
            <div class="camera">
              <h2 class="camera__name">{{ name }}</h2>
              <img class="camera__image" :src="img" />
            </div>
          </template>

          在這里,我們將name渲染到h2標(biāo)記中,并使用img設(shè)置img標(biāo)記上的src屬性。

          但是,如果我們將此信息存儲(chǔ)在某個(gè)位置的變量中怎么辦?

          為此,我們需要使用稍微不同的語(yǔ)法,因?yàn)槲覀兿M褂?JS 表達(dá)式而不是傳遞字符串。

          <template>
            <Camera
              v-bind:name="cameraName"
              v-bind:img="cameraImage"
            />
          </template>

          v-bind:name="cameraName"行告訴Vue將 JS 表達(dá)式cameraName綁定到 propname。JS 表達(dá)式是 JS 的任何代碼段。可能是像我們?cè)诖颂庍@樣的變量名,或更復(fù)雜的名稱(chēng)。

          還可以使用邏輯或 img 設(shè)置圖像路徑:

          <template>
            <Camera
              v-bind:name="cameraName"
              v-bind:img="cameraImage || '../no-camera-found.jpg'"
            />
          </template>

          v-bind 可以用簡(jiǎn)寫(xiě)形式 :

          <template>
            <Camera
              :name="cameraName"
              :img="cameraImage || '../no-camera-found.jpg'"
            />
          </template>

          添加 props

          在此代碼實(shí)際起作用之前,我們需要獲取Camera組件才能實(shí)際收聽(tīng)props。默認(rèn)情況下,組件會(huì)忽略它們。為此,我們必須在組件定義中添加一個(gè)props部分:

          export default {
            name: 'Camera',
            props: ['name', 'img'],
          }

          通常不建議這么寫(xiě),應(yīng)該為props對(duì)象指定類(lèi)型:

          export default {
            name: 'Camera',
            props: {
                name: {
                type: String,
                },
                img: {
                type: String,
                }
            }
          }

          通過(guò)從數(shù)組到對(duì)象,我們可以指定更多的 props 細(xì)節(jié),比如類(lèi)型。我們?yōu)槭裁匆騪rops 添加類(lèi)型?

          在Vue中,props 可以有很多不同的類(lèi)型:

          • String
          • Number
          • Boolean (true 或者 false)
          • Array
          • Object

          通過(guò)添加類(lèi)型,我們可以設(shè)置我們期望收到的數(shù)據(jù)類(lèi)型。如果我們將camera的props中的name設(shè)置為true,它將無(wú)法正常工作,因此Vue會(huì)警告我們使用錯(cuò)誤。

          接著添加一個(gè)rating到我們的Camera組件中,該 rating 類(lèi)型為 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>

          在外層調(diào)用:

          <template>
            <Camera
              name="Sony A7RIV"
              img="../sony-a7riv.jpg"
              :rating="9"
            />
          </template>

          必填的 props

          不是所有的 props 都是一樣的,為了使組件正常工作,其中一些要求必填的。

          對(duì)于我們的Camera組件,我們肯定需要一個(gè)name,但 img 和 rating 不是必需的。

          export default {
            name: 'Camera',
            props: {
                name: {
                type: String,
                required: true,
                },
                img: {
                type: String,
                },
                rating: {
                type: Number,
                },
            }
          }

          通過(guò)設(shè)置 required: true 要求我們的 name 是必需要傳入的,相反,required 為false 對(duì)應(yīng)的props可傳可不傳。

          默認(rèn)值

          對(duì)于不是每次都傳入的 props,我們可以為其,添加默認(rèn)值。

          export default {
            name: 'Camera',
            props: {
                name: {
                type: String,
                required: true,
                },
                img: {
                type: String,
                default: '../no-camerage-found.jpg',
                },
                rating: {
                type: Number,
                },
            }
          }

          前面我們通過(guò)邏輯或?yàn)閕mg添加默認(rèn)值,這次我們使用 default 屬性為img設(shè)置默認(rèn)值。

          同樣也需要為我們的rating設(shè)置默認(rèn)值。如果沒(méi)有設(shè)置也沒(méi)有從外部傳入,我們?cè)L問(wèn)的時(shí)候就會(huì)得到undefined,這可能會(huì)給我們帶來(lái)一些問(wèn)題

          在模板外使用 props

          雖然能夠在template中使用props很棒,但是真正強(qiáng)大的功能來(lái)自于在方法、計(jì)算屬性和組件中在使用其他 JS 中使用它們。

          在我們的template中,我們看到我們只需要props名稱(chēng),例如:{{rating}}。但是,在Vue組件的其他任何地方,我們都需要使用this.rating訪(fǎng)問(wèn)我們的props。

          讓我們重構(gòu)應(yīng)用程序,以便為圖像使用標(biāo)準(zhǔn)的URL結(jié)構(gòu)。這樣,我們不必每次都將其傳遞給Camera組件,而只需從名稱(chēng)中找出即可。

          我們將使用以下結(jié)構(gòu):./images/cameras/${cameraName}.jpg

          因此,如果 camera 是Sony A6400,則URL將變?yōu)?/images/cameras/Sony%20A6400.jpg。%20來(lái)自對(duì)空格字符的編碼,因此我們可以在URL中使用它。

          首先,我們將移除不再需要的img props

          export default {
            name: 'Camera',
            props: {
                name: {
                type: String,
                required: true,
                },
                rating: {
                type: Number,
                default: 0,
                },
            }
          }

          然后,我們將添加一個(gè)計(jì)算屬性,該屬性將為我們生成圖像URL:

          并非所有字符都可以在URL中使用,因此encodeURIComponent會(huì)為我們轉(zhuǎn)換這些字符。

          因?yàn)槲覀兛梢允褂门c常規(guī)props相同的方式來(lái)訪(fǎng)問(wèn)此計(jì)算 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:

          • watch 中
          • 生命周期 hook
          • method
          • computed 中

          以及組件定義中的其他任何地方!

          總結(jié)

          以上,這些是關(guān)于 props 的知識(shí)點(diǎn),但是,總會(huì)有更多東西要學(xué)習(xí)。Vue 也是一個(gè)永無(wú)止境的學(xué)習(xí)過(guò)程。keep going !


          作者:Michael Thiessen 譯者:前端小智 來(lái)源:Michael原文:https://reactgo.com/vuejs-props-tutorial/

          .傳遞數(shù)據(jù)

          1.props 傳入單數(shù)據(jù)

          就像 data 一樣,prop 可以用在模板內(nèi),同樣也可以在 vm 實(shí)例中像“this.message”這樣使用

          1. <template>
          2. <div id="app">
          3. <h1>{{title}}</h1>
          4. <child message="hello! Prop"></child>
          5. </div>
          6. </template>
          7. <script>
          8. import Vue from 'vue';
          9. Vue.component('child', {
          10. // 聲明 props
          11. props: ['message'],
          12. template: '<span>{{ message }}</span>'
          13. })
          14. export default {
          15. name: 'app',
          16. data: function () {
          17. return {
          18. title: '使用 Prop 傳遞數(shù)據(jù)'
          19. }
          20. }
          21. }
          22. </script>

          <child message="hello! Prop"></child>

          2.props 傳入多個(gè)數(shù)據(jù)

          如果在父組件的模板類(lèi)添加其他元素或者字符會(huì)有:

          ①在最前面加入—每個(gè)子組件渲染出來(lái)都會(huì)在其前面加上

          ②在最后面加入—每個(gè)子組件渲染出來(lái)都會(huì)在其后面加上

          ③在中間加入—他前面子組件后面加上,后面的子組件后面加上

          (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 需要轉(zhuǎn)換為相對(duì)應(yīng)的 kebab-case (短橫線(xiàn)隔開(kāi)式) 命名:

          Vue.component('child', {

          // camelCase in JavaScript

          props: ['myMessage'],

          template: '<span>{{ myMessage }}</span>'

          })

          <!-- kebab-case in HTML -->

          <child my-message="hello!"></child>

          二.動(dòng)態(tài)prop

          要?jiǎng)討B(tài)地綁定父組件的數(shù)據(jù)到子模板的 props,與綁定到任何普通的HTML特性相類(lèi)似,就是用 v-bind。每當(dāng)父組件的數(shù)據(jù)變化時(shí),該變化也會(huì)傳導(dǎo)給子組件

          <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 傳遞數(shù)據(jù)',

          parentMsg: 'Message from parent'

          }

          },

          components: {

          child: {

          props: ['myMessage'],

          template: '<span>{{myMessage}}</span>'

          }

          }

          }

          </script>

          三.表達(dá)式計(jì)算,傳遞值

          如果想傳遞一個(gè)實(shí)際的 number,需要使用 v-bind,從而讓它的值被當(dāng)作 JavaScript 表達(dá)式計(jì)算

          <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動(dòng)態(tài)語(yǔ)法,傳遞值會(huì)通過(guò)js的表達(dá)式計(jì)算,得到個(gè)值:'

          }

          }

          }

          </script>

          四.Prop類(lèi)型綁定

          prop 默認(rèn)是單向綁定:當(dāng)父組件的屬性變化時(shí),將傳導(dǎo)給子組件,但是反過(guò)來(lái)不會(huì)。這是為了防止子組件無(wú)意修改了父組件的狀態(tài)——這會(huì)讓?xiě)?yīng)用的數(shù)據(jù)流難以理解。

          五.prop驗(yàn)證

          傳入的數(shù)據(jù)不符合規(guī)格,Vue 會(huì)發(fā)出警告。當(dāng)組件給其他人使用時(shí),這很有用。

          <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,//基礎(chǔ)類(lèi)型檢測(cè)("null"意思是任何類(lèi)型都可以)

          msg_string: { //String類(lèi)型,必須是定義過(guò)的,可以是空字符串""

          type: String,

          required: true,

          },

          msg_number: {//Number類(lèi)型,默認(rèn)值100

          type: Number,

          default: 100,

          },

          msg_obj: {//Object類(lèi)型,返回值必須是js對(duì)象

          type: Object,

          default: function() {

          return {

          name: "DarkRanger",

          age: "18",

          }

          }

          },

          msg_twoway: { //指定這個(gè)prop為雙向綁定,如果綁定類(lèi)型不對(duì)將拋出一條警告

          type: String,

          twoWay: true,

          },

          msg_validate: { //自定義驗(yàn)證,必須是Number類(lèi)型,驗(yàn)證規(guī)則:大于0

          type: Number,

          validator: function(val) {

          return val > 0;

          }

          },

          msg_number2string: { //將值轉(zhuǎn)為String類(lèi)型,在設(shè)置值之前轉(zhuǎn)換值(1.0.12+)

          coerce: function(val) {

          return val + ""

          }

          },

          msg_obj2json: { //js對(duì)象轉(zhuǎn)JSON字符串

          coerce: function(obj) {

          return JSON.stringify(obj);

          }

          },

          msg_json2obj: {//JSON轉(zhuǎn)js對(duì)象

          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>

          解釋?zhuān)?/p>

          ①、msg_null:不論什么數(shù)據(jù)類(lèi)型,只要能解析成功,就渲染成正確的html

          ②、msg_string:只能傳遞String類(lèi)型的字符串,如果將child06中的“msg_string="this is string"”更改為“:msg_string="1+2"”,

          控制臺(tái)報(bào)錯(cuò):

          ③、msg_number:如果在child06標(biāo)簽中沒(méi)有定義值,我們將會(huì)取默認(rèn)值100,現(xiàn)在定義了“:msg_number="99"”,如果將“:msg_number="99"”更改為“msg_number="99"”,控制臺(tái)報(bào)錯(cuò):

          ④、msg_obj:在js中我們定義的msg_obj的default屬性是一個(gè)具有返回js對(duì)象的函數(shù),這里取值的時(shí)候直接取的就是返回值,如果在child06中定義或者綁定了新的js對(duì)象,則會(huì)將msg_obj更新為新的數(shù)據(jù)。取js對(duì)象屬性值的時(shí)候用{{Object.prop}}取值即可。

          ⑤、msg_twoway:雙向數(shù)據(jù)綁定,在測(cè)試的過(guò)程中發(fā)現(xiàn),即使設(shè)置“twoWay: true”,當(dāng)子組件發(fā)生變化時(shí),vue實(shí)例的數(shù)據(jù)并不會(huì)更新,還是單向的數(shù)據(jù)綁定,這里我將child06中原先的“:msg_twoway="telphone"”更改為“:msg_twoway.sync="telphone"”,保證測(cè)試能夠數(shù)據(jù)雙向綁定。

          ⑥、msg_validate:有驗(yàn)證規(guī)則的組件數(shù)據(jù),這里定義的規(guī)則是當(dāng)前數(shù)值必須大于0,如果將child06中的“:msg_validate="mobilephone"”更改為“:msg_validate="-1"”。控制臺(tái)報(bào)錯(cuò):

          ⑦、msg_number2string:在結(jié)果賦值之前將數(shù)值轉(zhuǎn)化為字符串。

          ⑧、msg_obj2json:vue.js內(nèi)置了JSON的兩個(gè)方法,一個(gè)是JSON.parse(jsonStr)--》將JSON字符串轉(zhuǎn)化為js對(duì)象,另外一個(gè)是JSON.stringify(obj)--》將js對(duì)象序列化為JSON字符串。

          這里是將obj轉(zhuǎn)化為json字符串,需要添加coerce屬性,它是一個(gè)具有返回json字符串的函數(shù),當(dāng)然不是必須得用JSON.stringify(obj)方法,只要方法合理,能夠轉(zhuǎn)化為json能夠識(shí)別的字符串即可。

          ⑨、msg_json2obj: 將json字符串轉(zhuǎn)化為js對(duì)象。


          主站蜘蛛池模板: 韩国精品一区视频在线播放| 一区二区3区免费视频| 亚洲日本一区二区三区在线不卡| 色精品一区二区三区| 人妻激情偷乱视频一区二区三区 | 日韩精品一区二区三区中文精品| 日韩经典精品无码一区| 国产精品自拍一区| 国产一区二区三区免费观看在线 | 一区二区三区观看免费中文视频在线播放| 全国精品一区二区在线观看| 鲁丝丝国产一区二区| 日韩免费观看一区| 亚洲AV永久无码精品一区二区国产| 人妻无码一区二区三区免费| 成人精品一区二区三区中文字幕 | 亚洲电影一区二区三区| 一区二区三区www| 国产第一区二区三区在线观看 | 国精产品一区一区三区免费视频| 狠狠做深爱婷婷久久综合一区| 亚洲一区中文字幕久久| 中文字幕一区二区三区永久 | 国产成人精品无人区一区| 性盈盈影院免费视频观看在线一区 | 国产亚洲一区区二区在线| 波多野结衣中文字幕一区二区三区| 国产大秀视频在线一区二区| 末成年女AV片一区二区| 无码一区二区三区| 亚洲乱码国产一区三区| 久久精品国产一区二区三区| 天天看高清无码一区二区三区| 亚洲AV成人精品一区二区三区| 88国产精品视频一区二区三区| 亚洲日本精品一区二区| 射精专区一区二区朝鲜| 久久久精品人妻一区二区三区四| 亚洲AV本道一区二区三区四区| 国产一区二区三区乱码| 国产AV一区二区三区传媒|