Vuejs中如何實(shí)現(xiàn)props數(shù)據(jù)傳遞

這篇文章主要介紹Vuejs中如何實(shí)現(xiàn)props數(shù)據(jù)傳遞，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

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

①組件實(shí)例的作用域：

是孤立的，簡(jiǎn)單的來(lái)說(shuō)，組件和組件之間，即使有同名屬性，值也不共享。

<div id="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>

渲染結(jié)果是：

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

②使用props綁定靜態(tài)數(shù)據(jù)：

【1】這種方法用于傳遞字符串，且值是寫(xiě)在父組件自定義元素上的。

【2】下面示例中的寫(xiě)法，不能傳遞父組件data屬性中的值

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

示例代碼：

<div id="app"> 
  <add 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>

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

【4】駝峰寫(xiě)法

假如插值是駝峰式的，而在html標(biāo)簽中，由于html的特性是不區(qū)分大小寫(xiě)（比如LI和li是一樣的），因此，html標(biāo)簽中要傳遞的值要寫(xiě)成短橫線式的（如btn-test），以區(qū)分大小寫(xiě)。

而在props的數(shù)組中，應(yīng)該和插值保持一致，寫(xiě)成駝峰式的（如btnTest）。

例如：

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

正確的寫(xiě)法：

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

假如插值寫(xiě)短橫線式，或者是html標(biāo)簽寫(xiě)成駝峰式，都不能正常生效。（除非插值不寫(xiě)成駝峰式——跳過(guò)大小寫(xiě)的限制，才可以）

③利用props綁定動(dòng)態(tài)數(shù)據(jù)：

簡(jiǎn)單來(lái)說(shuō)，就是讓子組件的某個(gè)插值，和父組件的數(shù)據(jù)保持一致。

標(biāo)準(zhǔn)寫(xiě)法是（利用v-bind）：

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

如代碼

<div id="app"> 
  <add v-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>

說(shuō)明：

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

【2】子組件的data的函數(shù)中返回值被覆蓋了。

【3】也就是說(shuō)，使用v-bind的是使用父組件的值（根據(jù)屬性名），沒(méi)有使用v-bind的是將標(biāo)簽里的數(shù)值當(dāng)做字符串來(lái)使用。

【4】依然需要使用props，否則他會(huì)取用自己data里的btn的值

④字面量和動(dòng)態(tài)語(yǔ)法：

【1】簡(jiǎn)單來(lái)說(shuō)，不加v-bind的，傳遞的是字面量，即當(dāng)做字符串（例如1也是字符串，而不是number類(lèi)型）；

【2】加上v-bind的，傳遞的是JS表達(dá)式（因此才能傳遞父組件的值）；

【3】加上v-bind后，如果能找到父組件的值，那么使用父組件的值；如果沒(méi)有對(duì)應(yīng)的，則將其看做一個(gè)js表達(dá)式（例如1+2看做3，{a:1}看做是一個(gè)對(duì)象）；

如代碼：

<div id="app"> 
  <add v-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>" 
      } 
    } 
  }); 
</script>

這里的btn的值是3（而不是沒(méi)有加v-bind時(shí)，作為字符串的1+2）

⑤props的綁定類(lèi)型：

【1】簡(jiǎn)單來(lái)說(shuō)，分為兩種類(lèi)型，即單向綁定（父組件能影響子組件，但相反不行）和雙向綁定（子組件也能影響父組件）；

【2】單向綁定示例：（默認(rèn)，或使用.once）

<div id="app"> 
  父組件： 
  <input v-model="val"><br/> 
  子組件： 
  <test v-bind:test-Val="val"></test> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      val: 1 
    }, 
    components: { 
      "test": { 
        props: ['testVal'], 
        template: "<input v-model='testVal'/>" 
      } 
    } 
  }); 
</script>

說(shuō)明：

當(dāng)父組件的值被更改后，子組件的值也隨之更改；

當(dāng)子組件的值被更改后，父組件的值不會(huì)變化，而假如再次修改父組件的值，子組件會(huì)再次同步。

另外需要注意的是，子組件如果要同步綁定，那么子組件的input需要是v-model，而不能是value屬性（那樣只能單項(xiàng)綁定，且修改子組件的值后會(huì)失去綁定）

【3】雙向綁定：

需要使用“.sync”作為修飾詞

如示例：

<div id="app"> 
  父組件： 
  <input v-model="val"><br/> 
  子組件： 
  <test :test.sync="val"></test> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      val: 1 
    }, 
    components: { 
      "test": { 
        props: ['test'], 
        template: "<input v-model='test'/>" 
      } 
    } 
  }); 
</script>

效果是無(wú)論你改哪一個(gè)的值，另外一個(gè)都會(huì)隨之變動(dòng)。

【4】props驗(yàn)證：

簡(jiǎn)單來(lái)說(shuō)，當(dāng)組件獲取數(shù)據(jù)時(shí)，進(jìn)行驗(yàn)證，只有符合條件的時(shí)候，才會(huì)使用之。

寫(xiě)法是將props變?yōu)橐粋€(gè)對(duì)象，被驗(yàn)證是值是對(duì)象的key，驗(yàn)證條件是和key對(duì)應(yīng)的value。

例如：

props: { 
  test: { 
    twoWay: true 
  } 
},

驗(yàn)證test這個(gè)變量是不是雙向綁定，如果不是，則報(bào)錯(cuò)。（注意，這個(gè)不能用于驗(yàn)證單向綁定）。

示例代碼如下：

<div id="app"> 
  父組件： 
  <input v-model="val"><br/> 
  子組件： 
  <test :test="val"></test> 
</div> 
<script> 
  var vm = new Vue({ 
    el: '#app', 
    data: { 
      val: 1 
    }, 
    components:{ 
      test:{ 
        props: { 
          test: { 
            twoWay: true 
          } 
        }, 
        template: "<input v-model='test'/>" 
      } 
    } 
  }); 
</script>

以上是“Vuejs中如何實(shí)現(xiàn)props數(shù)據(jù)傳遞”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！