vue.js學習之UI組件開發教程

發布時間：2020-10-22 20:43:00 來源：腳本之家閱讀：164 作者：rayman_v 欄目：web開發

本文主要給大家介紹了關于vue.js之UI組件開發的相關內容，分享出來供大家參考學習，下面來一起看看詳細的介紹：

1. 新建組件：

<script src="/public/javascripts/vue.js"></script>
<style>
 #app1{background-color: red}
 #app2{background-color: blue}
</style>
<body>
<div id="app1">
 <box-one></box-one>
 <box-two></box-two>
 <boxThree></boxThree>
</div>
<div id="app2">
 <box-one></box-one>
 <box-two></box-two>
</div>
<box-one></box-one>
<box-two></box-two>
<script>
Vue.component('box-one', {
 template: '<div class="box-one">box-one</div>'
});
var app1 = new Vue({
 el: '#app1',
 components: {
 'box-two': {
  template: '<div class="box-two">box-two</div>'
 },
 'boxThree': {
  template: '<div class="boxThree">boxThree</div>'
 }
 }
});
var app2 = new Vue({
 el: '#app2'
});
</script>

vue.js學習之UI組件開發教程

Vue.component 方法用于注冊全局組件， new Vue({ components: {}}) 用于注冊某個實例內使用的組件，所以 <box-two></box-two> 在 #app2 中失效；
由于瀏覽器渲染標簽時會把標簽全部轉成小寫，駝峰式組件名稱會失效，如事例中的 <boxThree></boxThree> ；
在實例以外無法使用任何組件；

2. 瀏覽器渲染網頁標簽的限制：

<script src="/public/javascripts/vue.js"></script>
<style>
 .red{background-color: red}
 .blue{background-color: blue}
</style>
<body>
<div id="app1">
 <table class="red">
 <box-one></box-one>
 </table>
 <select class="red">
 <box-two></box-two>
 </select>

 <table class="blue">
 <tr is="box-one"></tr>
 </table>
 <select class="blue">
 <option is="box-two"></option>
 </select>
</div>
<script>
Vue.component('box-one', {
 template: '<tr><td>box-one</td></tr>'
});
Vue.component('box-two', {
 template: '<option>option</option>'
});
var app1 = new Vue({
 el: '#app1'
});
</script>

vue.js學習之UI組件開發教程

由于受到瀏覽器渲染標簽的限制，例如 table 標簽子元素只能是 tbody 或 tr 、select 標簽子元素只能是 option ，類似的其他更多的標簽，所以 vue 引入了 is 屬性；
如果使用的是組件文件 .vue 后綴的文件開發，則因為是字符串方式渲染的，所以不受限制；

3. 組件中的 data 數據集：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <done-button></done-button>
</div>
<script>
Vue.component('done-button', {
 template: '<button>{{text}}</button>',
 data: function (){
 return {
  text: 'ok'
 }
 }
});
var app1 = new Vue({
 el: '#app1'
});
</script>

vue.js學習之UI組件開發教程

不同于 new Vue({}) 中的實例數據集，組件中的 data 數據集必須是一個函數，再使用函數返回一個對象集，否則會報錯；

4. 實例給組件傳值：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <done-button text="submit" textOne="submit1" text-two="submit2"></done-button>
</div>
<script>
Vue.component('done-button', {
 template: '<button :data-text="text" :data-text-one="textOne" :data-text-two="textTwo">{{text}}</button>',
 props: ['text', 'textOne', 'textTwo']
});
var app1 = new Vue({
 el: '#app1'
});
</script>

vue.js學習之UI組件開發教程

props 定義的字符串數組中的值，可以像 data 數據集一樣在組件內自由調用；
props 定義的字符串數組中的值，會作為組件標簽中的標簽屬性名，給實例賦值；
受瀏覽器渲染標簽屬性的影響，標簽屬性的命名如果使用駝峰式，則使用時 vue 會自動生成對應的短橫線隔開式屬性名，如事例中的 text-two；

5. 組件標簽屬性使用動態數據：

<script src="/public/javascripts/vue.js"></script>
<style>
 .appNumber{background-color: red}
</style>
<body>
<div id="app1">
 <done-button :number="appNumber"></done-button>
 <button class="appNumber" @click="appNumber++">{{appNumber}}</button>
</div>
<script>
Vue.component('done-button', {
 template: '<button @click="number++">{{number}}</button>',
 props: ['number']
});
new Vue({
 el: '#app1',
 data: {
 appNumber: 0
 }
});
</script>

vue.js學習之UI組件開發教程

實例中的 appNumber 變化時，組件中的 number 會跟著變化；
組件中的 number 變化時，實例中的 appNumber 并不會變化；
實例中的 appNumber 的值，會覆蓋組件內 number 的值；
但如果 appNumber 的值是數組或對象，由于是引用類型，則雙方都會互相影響；

6. 自定義組件屬性的值的規則：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <done-button number1="a" number2="1" :number3="1" ></done-button>
</div>
<script>
Vue.component('done-button', {
 template: '<button :num1="number1" :num2="number2" :num3="number3">{{number1}}</button>',
 props: {
 number1: {
  type: Number
 },
 number2: {
  type: Number
 },
 number3: {
  type: Number
 }
 }
});
new Vue({
 el: '#app1'
});
</script>

vue.js學習之UI組件開發教程

props 允許接受一個對象作為參數，每個參數作為一個元素屬性，type 為屬性的值期待的類型；
如果條件不符合，vue 的開發版下會在 console 打印出錯誤信息，但功能還是能正常傳值的；
事例中 number2 傳遞的其實是 String 類型的 '1'，而只有 :number3 這種賦值才能傳遞數值類型的 1；
可選項：

{
 // 屬性類型： String、Number、Boolean、Function、Object、Array，null-任意類型，
 // 可以使用數組多選
 type: null,

 // 是否必須被賦值：true、false
 required: false,

 // 默認值：可以是一般任意值或有返回值的函數
 default: '',

 // 自定義判斷函數：參數 value 為調用時傳入的值，
 // 返回 true、false 來通知 vue 機制是否報錯
 validator: function(value){ return true } 
}

7. 組件內給實例發送通知：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <done-button v-on:child="father" ></done-button>
</div>
<script>
Vue.component('done-button', {
 template: '<button v-on:click="add()">增加</button>',
 methods: {
  add: function () {
   this.$emit('child', 11);
  }
 }
});
new Vue({
 el: '#app1',
 methods: {
  father: function(number) {
   console.log('father' + number);
  }
 }
});
</script>

vue.js學習之UI組件開發教程

組件內無法直接與組件外數據集綁定，只能發送事件通知，組件內使用 this.$emit('child', 11) 告訴實例，該調用 child 事件了，后面的參數會變成 child 的調用參數傳遞；
實例在初始化組件時，定義 v-on:child="father" 元素屬性，來監聽 child 事件收到通知時應該執行什么處理，通過 father 的形參，可以直接訪問 child 的調用參數；

8. 組件之間通信：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <done-button ></done-button>
 <cancel-button></cancel-button>
</div>
<script>
var bus = new Vue();
Vue.component('done-button', {
 template: '<button v-on:click="send()">發送</button>',
 methods: {
  send: function () {
   bus.$emit('done-emit', 11);
  }
 }
});
Vue.component('cancel-button', {
 template: '<p>{{text}}</p>',
 data: function (){
  return {
   text: '00'
  }
 },
 mounted: function() {
  var _this = this;
  bus.$on('done-emit', function(number) {
   _this.text = number;
  });
 }
});
new Vue({
 el: '#app1',
 methods: {
  call: function(value) {
   console.log('father:' + value);
  }
 }
});
</script>

vue.js學習之UI組件開發教程

可以定義一個全局實例 bus ，在不同組件內使用 bus.$emit 發送通知，使用 bus.$on 監聽通知；

9. 組件內容節點的分發：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <box></box>
 <box>
  <h5>box1</h5>
 </box>
 <box>{{box2Text}}</box>
</div>
<script>
Vue.component('box', {
 template: '<p><slot>默認</slot></p>'
});
new Vue({
 el: '#app1',
 data: {
  box2Text: 'box2'
 }
});
</script>

vue.js學習之UI組件開發教程

vue 默認在組件內定義了 <slot> 標簽，用于獲取組件被使用時的內容節點；
<slot> 標簽的內容為組件的默認內容節點；
內容節點也可使用動態數據；

10. 多個 <slot> 標簽之間的使用：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <box>
  <p>ppppp</p>

  <p slot="h5">h5</p>
  <h5 slot="h5">h5</h5>

  <p slot="h6">h6</p>
  <h6 slot="h6">h6</h6>
 </box>
</div>
</div>
<script>
Vue.component('box', {
 template: [
  '<div id="box">',
   '<div class="default">',
    '<slot></slot>',
   '</div>',
   '<div class="h5">',
    '<slot name="h5"></slot>',
   '</div>',
   '<div class="h6">',
    '<slot name="h6"></slot>',,
   '</div>',
  '</div>',
 ].join('')
});
new Vue({
 el: '#app1'
});
</script>

vue.js學習之UI組件開發教程

沒有聲明 name 屬性的 <slot> 標簽，是為組件的內容節點中沒有聲明 slot 屬性的標簽而占位；
聲明了 name 屬性的 <slot> 標簽，是為組件的內容節點中與之相等 slot 屬性的標簽而占位；
多個標簽應用了相同的 slot 屬性也會有效；

11. <slot> 標簽回傳數據給內容節點：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <box >
  <template scope="props">
   <span>{{props.text}}</span>
  </template>
 </box>
</div>
</div>
<script>
Vue.component('box', {
 template: '<div id="box"><slot v-for="i in items" :text="i"></slot></div>',
 data: function (){
  return {
   items: [0,1,2,3,4]
  }
 }
});
new Vue({
 el: '#app1'
});
</script>

vue.js學習之UI組件開發教程

首先，數據是組件內提供的，但數據的布局方式由實例調用組件時決定；
在組件的內容節點內，必須使用 <template> 標簽包含著要渲染的子元素，并且定義 scope="props" 屬性，而 <template> 標簽內則是 props 對象的作用域上下文；
props 內自動含有 <slot> 標簽中的屬性，例如事例中的 text 屬性，則可直接使用 props.text 訪問到 text 屬性的值；
當然，也可以結合 <slot name="header"> 使用，而 <template slot="header"> 即可；
<template> 標簽為 vue 保留的標簽，實際只是個占位符；

12. 動態切換組件：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <component :is="view"></component>
 <button @click="view = 'inlinebox'">change</button>
</div>
</div>
<script>
Vue.component('box', {
 template: '<div id="box">box</div>',
});
Vue.component('inlinebox', {
 template: '<div id="inlinebox">inlinebox</div>'
});
new Vue({
 el: '#app1',
 data: {
  view: 'box'
 }
});
</script>

vue.js學習之UI組件開發教程

<component> 標簽為 vue 保留的標簽，實際只是個占位符；
is 屬性可指定組件標簽名，也可綁定動態變量；

13. 在實例中訪問子元素對象：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <box ref="box1"></box>
</div>
</div>
<script>
Vue.component('box', {
 template: '<div id="box">box</div>',
});
new Vue({
 el: '#app1',
 mounted: function() {
  console.log(this.$refs);
 }
});
</script>

vue.js學習之UI組件開發教程

只要為組件指定 ref 屬性，實例中則會在 $refs 中訪問到組件的對象；

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如有疑問大家可以留言交流，謝謝大家對億速云的支持。

向AI問一下細節

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

vue.js學習之UI組件開發教程

猜你喜歡

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

vue.js學習之UI組件開發教程

猜你喜歡

最新資訊

相關推薦

相關標簽