Detailed description of powerful Vue.js components

This article mainly tells you about the detailed description of the powerful Vue.js components. Components are one of the most powerful functions of Vue.js. Interested friends can refer to it

What is a component: Components are one of the most powerful features of Vue.js. Components can extend HTML elements, encapsulating reusable code. At a high level, a component is a self-defined element to which Vue.js's compiler adds special functionality. In some cases, components can also be in the form of native HTML elements, extended with the is attribute.

How to register a component?
You need to use the Vue.ext

end

method to create a component, and then use the Vue.component method to register the component. The format of the Vue.extend method is as follows:

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

If you want to use this created component elsewhere, you have to name the component:

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

After naming, you can use the component name in the

HTML tag

, just like using a DOM element. Let’s take a look at a complete component registration and usage example.
html code:

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

js code:

// 定义
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;
})

Output result:

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

Nested components
The component itself can also contain components. The parent component below contains a component named child-component, but this component can only be used by the parent component:

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);

The above definition process It's more cumbersome, and you don't need to call the Vue.component and Vue.extend methods every time:

// 在一个步骤中扩展与注册
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;
 }
 }
})

Dynamic components
More Two components can use the same mount point and then switch between them dynamically. Use the reserved element and dynamically bind to its is attribute. In the following example, three components, home, posts, and archive, are installed under the same vue instance, and the component display is dynamically switched through the feature

current

View.
html code:

<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 code:

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";
};

Component and v-

for

Cannot pass data to the component because the scope of the component is independent. In order to pass data to the component, props should be used:

v-for="item in items"

:item="item"
:index="$ index">


The reason why item is not automatically injected into the component is that this will cause the component to be tightly coupled with the current v-for. Explicitly declaring where the data comes from allows components to be reused in

other

places.

In-depth responsiveness principle

When a component binds data, how can the binding be effective and can be dynamically modified and added

Attributes

? Take a look at the principle introduction below.
How to track changes: Pass a different

object

to the vue instance as the data option, vue.js will traverse its properties, using Object. defineProperty converts it to a getter/setter. This is an ES5 feature and all vue.js does not support IE8 or lower.
Each instruction/

Data binding

in the template has a corresponding watcher object, which records the properties as dependencies during the calculation process. Later, when the dependent setter is called, the watcher will be triggered to recalculate. The process is as follows:

Change detection problem: vue.js cannot detect the addition or

deletion of object attributes

, the attributes must be in data Only then can vue.js convert it to getter/settermode, and then there will be a response. For example:

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

However, there is also a way to add properties after the instance is created and make it corresponding. You can use the set(

key

,value) instance method:
vm. set('b', 2)

// `vm.b` and `data. b` is now responsive

对于普通对象可以使用全局方法：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使用总结

The above is the detailed content of Detailed description of powerful Vue.js components. For more information, please follow other related articles on the PHP Chinese website!