Vue--元件(1)

東方來客發表於2018-09-07
Vue元件

使用元件的原因是提高程式碼複用性。

元件的使用方法

元件需要先註冊才能使用，註冊分為全域性註冊和區域性註冊兩種。 全域性註冊：

Vue.component('component-name',{
    template:'<div>內容</div>'    
})
複製程式碼

在html中以component-name為標籤就會用template中的內容替換<component-name>.
區域性註冊：

var app = new Vue({
    el:'#app',
    data:{
        
    },
    components:{
        'part-ponents':{
        template："<div>我是區域性註冊</div>"
        }
    }
})
複製程式碼
  1. 區域性註冊的元件只能在本個Vue例項中使用。

像li ul table td th等適用場合有限制，會導致我們的元件失效。解決辦法如下:

<table>
  <th is="my-component"></th>
</table>
複製程式碼

使用元件的技巧

  1. 是用小寫字母加"-"來命名。
  2. template中的內容必須使用html標籤包裹。
  3. 在元件的定義中，除template外還可以有data，computed，methods，其中 data必須是一個方法。

父向子元件傳遞資料

  1. 在元件中使用props從父親元件接收引數。在props中定義的屬性都可以直接在元件中直接使用。
  2. props的值有兩種，一種是字串陣列，一種是物件。 來一個示例吧：
<div id="app">
    <part-component msg="久在樊籠裡，復得返自然。"></part-component>
</div>
複製程式碼
var app = new Vue({
    el:'#app',
    data:{
        
    },
    components:{
        'part-components':{
            props:['msg']
            template:'<div>{{msg}}</div>'
        }
    }
})
複製程式碼

Vue--元件(1)
還可以用v-bind動態繫結：

<div id="app">
    <input type="text" v-model='parent'>
    <pcomponnet :msg="parent"></pcomponent>
<div>
複製程式碼
 var app = new Vue({
    el:"#app",
    data:{
        parent:'少無適俗韻'
    },
    components:{
        'pcomponent':{
            props:['msg']
            template:<div>{{msg}}</div>
        }
    }
 })
複製程式碼

Vue--元件(1)

單向資料流

定義：通過 prop 傳輸資料的時候，可以通過父元件向子元件傳輸資料，反過來是不行的，以避免子元件影響父元件。
應用場景：
1.

<div id='app'>
    <my-component msg='開荒南野際'></div>
</div>
複製程式碼
var app = new Vue({
    el:'#app',
    components:{
        'my-component':{
            template:'<div>{{count}}</div>',
            data:function(){
                return{
                    count: this.msg
                }
            }
        }
    }
})
複製程式碼
<input v-model="width" type="text"></input>
<width-component></width-component>
複製程式碼
var app = new Vue({
  el: '#app',
  data: {
    width: 0
  },
  components: {
    'width-component': {
      template: '<div :style="style"></div>',
      computed: {
        style:  function(){
          return {
            width: this.$parent.$data.width + 'px',
            'background-color': 'red',
            height: '30px'
          }
        }
      }
    }
  }
})
複製程式碼

資料驗證

資料型別校驗

  <div id="app">
    <my-component :a='a' :b='b' :c='c' :d='d' :e='e'></my-component>
  </div>
複製程式碼
Vue.component('my-component',{
  props:{
    a:Number    //資料型別驗證，是否為數字
    b:[Boolean,String]   //驗證資料型別是否為布林值或者字串。
    c:{
        type:Boolean,
        default:true,
        required:true
    },
    d: {                             //父元件未向子元件傳資料時使用預設值
        type: Array,
        default: function () {
        return 123
        }
    }, 
    e: {                                //開發環境構建版本會提示錯誤
      validator: function (value) {
        return value < 10;
      }
    }
  },
  template:'<div>{{a}}--{{b}}--{{c}}--{{d}}</div>'
})
var app = new Vue({
  el:'#app',
  data:{
    a:1,
    b:true，
    c:'',
    d: [],
    e: 111
  }
})
複製程式碼

相關文章