強力な Vue.js コンポーネントの詳細な説明

この記事では主に、強力な Vue.js コンポーネントの詳細について説明します。コンポーネントは Vue.js の最も強力な機能の 1 つです。興味のある方は、

コンポーネントとは: コンポーネントの 1 つを参照してください。 Vue.js の最も強力な機能。コンポーネントは HTML 要素を拡張して、再利用可能なコードをカプセル化できます。大まかに言うと、コンポーネントは、Vue.js のコンパイラーが特別な機能を追加する自己定義の要素です。場合によっては、コンポーネントは、 is 属性で拡張されたネイティブ HTML 要素の形式にすることもできます。

コンポーネントを登録するにはどうすればよいですか?

Vue.ext
end

メソッドを使用してコンポーネントを作成し、次に Vue.component メソッドを使用してコンポーネントを登録する必要があります。 Vue.extend メソッドの形式は次のとおりです:

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

この作成したコンポーネントを他の場所で使用したい場合は、コンポーネントに名前を付ける必要があります:

Vue.component('my-component', 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

ネストされたコンポーネント

コンポーネント自体には、 child-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);

上記の定義プロセスは比較的面倒で、毎回 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;
 }
 }
})

Dynamicコンポーネント

その他 2 つのコンポーネントは同じマウント ポイントを使用し、それらを動的に切り替えることができます。予約済みの 要素を使用して、その is 属性に動的にバインドします。以下の例には、同じ vue インスタンス内に home、posts、archive の 3 つのコンポーネントがあり、コンポーネントの表示は current

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-for と緊密に結合されることになるためです。データの取得元を明示的に宣言すると、コンポーネントを
他の
場所で再利用できるようになります。

応答性の原則の詳細

コンポーネントがデータをバインドするとき、どのようにバインドを効果的にし、

属性を動的に変更および追加できるでしょうか?以下の
原理紹介をご覧ください。

変更の追跡方法: 別の object をデータ オプションとして vue インスタンスに渡すと、vue.js はそのプロパティを走査し、Object
.defineProperty を使用してそれを getter/

set

ter に変換します。これは ES5 の機能であり、すべての vue.js は IE8 以前をサポートしていません。テンプレート内の各命令/データ バインディングには、対応するウォッチャー オブジェクトがあり、計算プロセス中にプロパティを依存関係として記録します。後で、依存セッターが呼び出されるときに、ウォッチャーが再計算をトリガーされます。プロセスは次のとおりです:

変更検出の問題: 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 id="Custom-nbsp-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 中国語 Web サイトの他の関連記事を参照してください。