props如何在Vue中使用

本篇文章給大家分享的是有關(guān)props如何在Vue中使用，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、代縣網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為代縣等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

props屬性是父子組件之間的通信橋梁。何為父子組件？從子組件的觀點(diǎn)來看，他的上一級(jí)實(shí)例或組件即為他的父組件。我們知道，處于安全考慮，組件模板里我們無法直接使用父組件的data數(shù)據(jù)，使用props這個(gè)屬性可以將父組件的數(shù)據(jù)傳給子組件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>props的測(cè)試</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div id="props">
  <Child message="父組件的message,我把他的內(nèi)容重新定義了，但是父組件不會(huì)發(fā)生改變哦，因?yàn)闆]有綁定，哈哈??！"></Child>
  <hr />
  <input v-model="message"/>
  <Child :message='message'></Child>
</div>
<script>
  Vue.component('Child',{
    props: ['message'],
    template: '<span>{{ message }}</span>'
  });
  var vm = new Vue({
    el: '#props',
    data: {
      message: 'prop的測(cè)試'
    }
  });
</script>
</body>
</html>

代碼效果圖

在子組件中對(duì)父組件的數(shù)據(jù)進(jìn)行處理。父組件的數(shù)據(jù)通過props傳入子組件以后，在子組件中也可對(duì)數(shù)據(jù)進(jìn)行相關(guān)處理，包括計(jì)算屬性、data屬性等。這樣當(dāng)子組件需要對(duì)數(shù)據(jù)進(jìn)行處理時(shí)，避免了直接在父組件中對(duì)數(shù)據(jù)進(jìn)行操作，而且由于props數(shù)據(jù)流單向性，在子組件中更改數(shù)據(jù)時(shí)，不會(huì)對(duì)父組件的數(shù)據(jù)產(chǎn)生影響。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>props的測(cè)試</title>
  <script src="../js/vue.js"></script>
</head>
<body>
<div id="props">
  <input v-model="message"/>
  <Child :message='message'></Child>
</div>
<script>
  Vue.component('Child',{
    props: ['message','todos'],
    template: '<span>{{ test }}</span>',
    computed: {
      test: function(){
        return this.message.trim().toUpperCase();
      }}
  });
  var vm = new Vue({
    el: '#props',
    data: {
      message: 'prop的測(cè)試'
    }
  });
</script>
</body>
</html>

代碼效果圖

prop的驗(yàn)證

我們可以為組件的 prop 指定驗(yàn)證規(guī)則。如果傳入的數(shù)據(jù)不符合要求，Vue 會(huì)發(fā)出警告。這對(duì)于開發(fā)給他人使用的組件非常有用。

要指定驗(yàn)證規(guī)則，需要用對(duì)象的形式來定義 prop，而不能用字符串?dāng)?shù)組

Vue.component('example',{
  props: {
    propA: String,
    propB: [Number,String]
}
});

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫，Vue允許可以將一個(gè)網(wǎng)頁分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

以上就是props如何在Vue中使用，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站名稱：props如何在Vue中使用
網(wǎng)頁網(wǎng)址：http://bm7419.com/article36/pcidsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、Google、做網(wǎng)站、網(wǎng)頁設(shè)計(jì)公司、標(biāo)簽優(yōu)化、服務(wù)器托管

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容