vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例

更新時(shí)間：2017年08月17日 10:11:50 作者：街角小七

本篇文章主要介紹了vue組件Prop傳遞數(shù)據(jù)的實(shí)現(xiàn)示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

組件實(shí)例的作用域是孤立的。這意味著不能(也不應(yīng)該)在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，我們需要通過子組件的props選項(xiàng)。

prop 是單向綁定的：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是不會(huì)反過來。這是為了防止子組件無意修改了父組件的狀態(tài)。

每次父組件更新時(shí)，子組件的所有 prop 都會(huì)更新為最新值。這意味著你不應(yīng)該在子組件內(nèi)部改變 prop。

1、Prop靜態(tài)傳遞數(shù)據(jù)

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="vue.js"></script>

</head>
<body >
<div id="app">
  <!--靜態(tài)傳遞數(shù)據(jù)-->
   <my-component message="hello" name="劉二狗" age="18"></my-component>
</div>
</body>

<script>
  Vue.component('my-component',{
    //子組件使用父組件的數(shù)據(jù) message name age
    props:['message','name','age'],
    //用data選項(xiàng)對(duì)數(shù)據(jù)進(jìn)行處理
    data:function(){
     return{
       message1: this.message +'用data選項(xiàng)對(duì)數(shù)據(jù)進(jìn)行處理'
     }
    },
    //用計(jì)算屬性選項(xiàng)對(duì)數(shù)據(jù)進(jìn)行處理
    computed:{
      message2:function(){
        return this.message + '用計(jì)算屬性選項(xiàng)對(duì)數(shù)據(jù)進(jìn)行處理'
      }
    },
    template:'<div>' +
          '<span>{{message1}}</span><br>'+
          '<span>{{message2}}</span><br>'+
          '<span>{{message}} {{name}}今年{{age}}了</span><br>'+
         '</div>'
  })
  new Vue({
    el:'#app'
  })
</script>
</html>

輸出結(jié)果：

2、Prop動(dòng)態(tài)傳遞數(shù)據(jù)

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="vue.js"></script>
</head>
<body >
<div id="app">
    <input v-model="parentMsg"><br>
    <my-component :message="parentMsg"></my-component>
</div>
</body>

  <script>
    Vue.component('my-component',{
      props:['message'],
      data:function(){
        return{count:this.message+'劉三狗的嫉妒了'}
      },
      computed:{
        normalizedSize: function () {
          return this.message.trim().toLowerCase()
        }
      },
      template:'<div>' +
            '<span>{{message}}---{{normalizedSize}}</span><br>'+
            '<span>{{count}}</span>'+
           '</div>'
    })

    new Vue({
      el:'#app',
      data:{
        parentMsg:'哈哈哈'
      }
    })
</script>
</html>

輸出結(jié)果：

3、Prop驗(yàn)證，我們可以為組件的 props 指定驗(yàn)證規(guī)格。如果傳入的數(shù)據(jù)不符合規(guī)格，Vue 會(huì)發(fā)出警告。在前臺(tái)的控制器中可以看到警告信息。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="vue.js"></script>
</head>
<body>
  <div id="app">
    <example :prop-d="message"></example>
  </div>
</body>

<script>
  Vue.component('example', {
    props: {
      // 基礎(chǔ)類型檢測 （`null` 意思是任何類型都可以）
      propA: Number,
      // 多種類型
      propB: [String, Number],
      // 必傳且是字符串
      propC: {
        type: String,
        required: true
      },
      // 數(shù)字，有默認(rèn)值
      propD: {
        type: Number,
        default: 100
      },
      // 數(shù)組／對(duì)象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回
      propE: {
        type: Object,
        default: function () {
          return { message: 'hello' }
        }
      },
      // 自定義驗(yàn)證函數(shù)
      propF: {
        validator: function (value) {
          return value > 10
        }
      }
    },
    template:'<span>{{propD}}</span>'
  })

  new Vue({
    el:'#app',
    data:{
      message:'propD驗(yàn)證只能傳入數(shù)字類型'
    }
  })
</script>
</html>

控制臺(tái)輸出的警告信息：