強大Vue.js元件詳細說明

這篇文章主要為大家講述強大Vue.js元件詳細說明，元件是Vue.js最強大的功能之一，有興趣的夥伴們可以參考一下

什麼是元件：元件是Vue.js最強大的功能之一。元件可以擴充HTML元素，封裝可重複使用的程式碼。在較高層面上，元件是自定義的元素，Vue.js的編譯器為它添加特殊功能。在某些情況下，元件也可以是原生HTML元素的形式，以is特性擴充。

如何註冊元件？

需要使用Vue.extend方法建立一個元件，然後使用Vue.component方法註冊元件。 Vue.extend方法格式如下： 

var MyComponent = Vue.extend({
 // 选项...后面再介绍
})

如果你想要在其他地方使用這個建立的元件，就得個元件命個名稱： 

Vue.component('my-component ', MyComponent) 

命名之後即可在HTML標籤中使用這個元件名稱，像使用DOM元素一樣。下面來看看一個完整的組件註冊和使用範例。

html程式碼： 

<p id="example">
 <my-component></my-component>
</p>

js程式碼： 

// 定义
var MyComponent = Vue.extend({
 template: &#39;<p>A custom component!</p>&#39;
})

// 注册
Vue.component(&#39;my-component&#39;, MyComponent)

// 创建根实例
new Vue({
 el: &#39;#example&#39;
})

輸出結果：

 <p id="example">
 <p>A custom component!</p>
</p

##巢狀元件
元件本身也可以包含元件，而下面的parent元件就包含了一個命名為child-component元件，但這個元件只能被parent元件使用: 

var child = Vue.extend({
 template: &#39;<p>A custom component!</p>&#39;
});
var parent = Vue.extend({

 template: &#39;<p>Parent Component: <child-component></child-component></p>&#39;,
 components: {
 &#39;child-component&#39;: child
 }
});
Vue.component("parent-component", parent);

上面的定義過程比較繁瑣，也可以不用每次都呼叫Vue.component和Vue.extend方法: 

// 在一个步骤中扩展与注册
Vue.component('my-component', {
template: &#39;<p>A custom component!</p>&#39;
})

// 局部注册也可以这么做
var Parent = Vue.extend({
 components: {
 &#39;my-component&#39;: {
  template: &#39;<p>A custom component!</p>&#39;
 }
 }
})

動態元件

多個元件可以使用同一個掛載點，然後動態的在他們之間切換。使用保留的元素，動態地綁定到它的is特性。下面的列子在同一個vue實例下掛了home、posts、archive三個元件，透過特性

currentView動態切換元件顯示。

html程式碼： 

<p id="dynamic">
 <button id="home">Home</button>
 <button id="posts">Posts</button>
 <button id="archive">Archive</button>
 <br>
 <component :is="currentView"></component>
</p>

js程式碼： 

var vue = new Vue({
 el:"#dynamic",
 data: {
 currentView: "home"
 },
 components: {
 home:{
  template: "Home"
 },
 posts: {
  template: "Posts"
 },
 archive: {
  template: "Archive"
 }
 }
});
document.getElementById("home").onclick = function(){
vue.currentView = "home";
};
document.getElementById("posts").onclick = function(){
vue.currentView = "posts";
};
document.getElementById("archive").onclick = function(){
vue.currentView = "archive";
};

元件和v-

for  

#無法將資料傳遞給元件，因為元件的作用域是獨立的。為了將資料傳遞給元件，應使用props: 

v-for="item in items"
:item="item"
:index="$ index">

不自動把item 注入元件的原因是這會導致元件跟目前v-for 緊密耦合。明確聲明資料來自哪裡可以讓元件重複使用在

其它地方。

 

深入響應式原理

在元件綁定資料時，如何綁定才能夠有效，並且可動態修改、新增

屬性？看看下面的原理介紹。

如何追蹤變化：把一個不同

物件傳給vue實例作為data的選項，vue.js將遍歷它的屬性，用Object. defineProperty將它轉換為getter/setter。這是ES5特性，所有vue.js不支援IE8或更低版本。

模板中每個指令/

資料綁定都有一個對應的watcher對象，在計算過程中它把屬性記錄為依賴。之後當依賴的setter被呼叫時 ，會觸發watcher重新計算。流程如下所示： 

變更偵測問題：vue.js無法偵測到物件屬性的新增或

刪除，屬性必須在data上才能讓vue.js轉換它為getter/setter模式，才能有回應。例如： 

var data = { a: 1 };
var vm = new Vue({
data: data
});
// `vm.a` 和 `data.a` 现在是响应的
vm.b = 2
// `vm.b` 不是响应的
data.b = 2
// `data.b` 不是响应的

不過，也有辦法在實例建立後新增屬性並且讓它是對應的。可以使用set(

key,value)實例方法： 

vm. set('b', 2)

// `vm.b` 和`data. b` 現在是回應的 

对于普通对象可以使用全局方法：Vue.set(object, key, value)：
Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 现在是响应的 

初始化数据：尽管Vue.js提供动态的添加相应属性，还是推荐在data对象上声明所有的相应属性。

不这么做： 

var vm = new Vue({
 template: &#39;<p>{{msg}}</p>&#39;
})
// 然后添加 `msg`
vm.$set(&#39;msg&#39;, &#39;Hello!&#39;)

应该这么做： 

var vm = new Vue({
 data: {
 // 以一个空值声明 `msg`
 msg: ''
 },
 template: &#39;<p>{{msg}}</p>&#39;
})
// 然后设置 `msg`
vm.msg = &#39;Hello!&#39;

组件完整案例
下面介绍的例子实现了模态窗口功能，代码也比较简单。

html代码：

<!-- 实现script定义一个模板 -->
<script type="x/template" id="modal-template">
 <!--模板是否显示通过v-show="show"来设置， transition设置动画效果-->
 <p class="modal-mask" v-show="show" transition="modal">
 <p class="modal-wrapper">
  <p class="modal-container">
  <p class="modal-header">
   <!--slot 相当于header占位符-->
   <slot name="header">
   default header
   </slot>
  </p>
  <p class="modal-body">
   <!--slot 相当于body占位符-->
   <slot name="body">
   default body
   </slot>
  </p>
  <p class="modal-footer">
   <!--slot 相当于footer占位符-->
   <slot name="footer">
   default footer
   </slot>
   <button class="modal-default-button" @click="show = false">OK</button>
  </p>
  </p>
 </p>
 </p>
</script>
<p id="app">
 <!--点击按钮时设置vue实例特性showModal的值为true-->
 <button id="show-modal" @click="showModal = true">show modal</button>
 <!--modal是自定义的一个插件，插件的特性show绑定vue实例的showModal特性-->
 <modal :show.sync="showModal">
 <!--替换modal插件中slot那么为header的内容-->
 <h3 slot="header">Custom Header</h3>
 </modal>
</p>

 js代码： 

//定义一个插件，名称为modal
Vue.component("modal", {
 //插件的模板绑定id为modal-template的DOM元素内容
 template: "#modal-template",
 props: {
 //特性，类型为布尔
 show:{
  type: Boolean,
  required: true,
  twoWay: true
 }
 }
});
//实例化vue，作用域在id为app元素下，
new Vue({
 el: "#app",
 data: {
 //特性，默认值为false
 showModal: false
 }
});

css代码： 

.modal-mask {
 position: fixed;
 z-index: 9998;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, .5);
 display: table;
 transition: opacity .3s ease;
}

.modal-wrapper {
 display: table-cell;
 vertical-align: middle;
}

.modal-container {
 width: 300px;
 margin: 0px auto;
 padding: 20px 30px;
 background-color: #fff;
 border-radius: 2px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
 transition: all .3s ease;
 font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
 margin-top: 0;
 color: #42b983;
}

.modal-body {
 margin: 20px 0;
}

.modal-default-button {
 float: right;
}

/*
* the following styles are auto-applied to elements with
* v-transition="modal" when their visiblity is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/

.modal-enter, .modal-leave {
 opacity: 0;
}

.modal-enter .modal-container,
.modal-leave .modal-container {
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}

相关文章：

通过纯Vue.js构建Bootstrap组件

Vue.js环境搭建教程介绍

超全面的vue.js使用总结

以上是強大Vue.js元件詳細說明的詳細內容。更多資訊請關注PHP中文網其他相關文章！