강력한 Vue.js 구성 요소에 대한 자세한 설명

이 글에서는 주로 Vue.js 컴포넌트에 대한 자세한 설명을 소개합니다. 컴포넌트는 Vue.js의 가장 강력한 기능 중 하나이므로 관심 있는 분들은 참고하시기 바랍니다

컴포넌트란 무엇입니까? 컴포넌트는 Vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화할 수 있습니다. 높은 수준에서 구성 요소는 Vue.js의 컴파일러가 특수 기능을 추가하는 자체 정의 요소입니다. 어떤 경우에는 구성 요소가 is 속성으로 확장된 기본 HTML 요소의 형태일 수도 있습니다.

컴포넌트 등록은 어떻게 하나요?

Vue.ext

end 메소드를 사용하여 컴포넌트를 생성한 후 Vue.comComponent 메소드를 사용하여 컴포넌트를 등록해야 합니다. Vue.extend 메소드의 형식은 다음과 같습니다:

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

이 생성된 구성 요소를 다른 곳에서 사용하려면 구성 요소 이름을 다음과 같이 지정해야 합니다.

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

이름을 지정한 후 DOM 요소를 사용하는 것처럼

HTML 태그에서 이 구성 요소 이름을 사용할 수 있습니다. 전체 구성 요소 등록 및 사용 예를 살펴보겠습니다.

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

중첩된 구성 요소
구성 요소 자체에도 구성 요소가 포함될 수 있습니다. 아래 상위 구성 요소에는 하위 구성 요소라는 구성 요소가 포함되어 있지만 이 구성 요소는 상위 구성 요소에서만 사용할 수 있습니다.

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.comComponent 및 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, post, archive라는 세 가지 구성 요소가 있으며 구성 요소 표시는

현재View 기능을 통해 동적으로 전환됩니다.

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

항목이 구성 요소에 자동으로 주입되지 않는 이유는 이로 인해 구성 요소가 현재 v와 긴밀하게 결합되기 때문입니다. -을 위한. 데이터의 출처를 명시적으로 선언하면

다른 위치에서 구성 요소를 재사용할 수 있습니다.

심층 대응 원칙

컴포넌트가 데이터를 바인딩할 때 바인딩이 어떻게 효과적이며 동적으로 수정 및 추가될 수 있는지

속성? 아래 원칙 소개를 살펴보세요.

변경 사항을 추적하는 방법: 다른

객체 를 vue 인스턴스에 데이터 옵션으로 전달하면 vue.js는 Object를 사용하여 해당 속성을 탐색합니다. DefineProperty는 이를 getter/setter로 변환합니다. 이는 ES5 기능이며 모든 vue.js는 IE8 이하를 지원하지 않습니다. 템플릿의

각 명령/

데이터 바인딩에는 계산 프로세스 중에 속성을 종속성으로 기록하는 해당 감시자 개체가 있습니다. 나중에 종속 setter가 호출되면 감시자가 다시 계산하도록 트리거됩니다. 프로세스는 다음과 같습니다:

변경 감지 문제: vue.js가

객체 속성 삭제를 감지할 수 없습니다. 데이터에 있어야 합니다. 이렇게 해야 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!