Vue.js コンポーネントとコンポーネント通信の詳細

基本的には、公式 Web サイトのガイドに従ってすべてを整理しました: http://vuejs.org/guide/index.html ここでは、Todo List アプリケーションを例として、この中のすべての関連するコードをつなぎ合わせます。記事は github にあります https://github.com/lihongxun945/vue-todolist

Vue インスタンス

Vue アプリケーションはルート Vue インスタンスによって起動および開始され、Vue インスタンスは次のように作成されます:

var vm = new Vue({
 // options
})

インスタンスは実際には MVVM の VM です。 渡された構成オブジェクト内のデータ内のすべてのプロパティはインスタンスにマウントされます。名前の競合を避けるために、Vue の組み込みメソッドは $ で始まるプロパティをインスタンスにマウントします。

インスタンスは、作成から破棄まで次のライフサイクルを経ます:

初期化中に、大まかに次の 3 つのステップを経ます:
• バインドデータモニタリング、つまりデータのモニタリング
• テンプレートのコンパイル
• ドキュメントの挿入または対応するドキュメントの置換dom
# Vue の基本構文

データバインディング

Vue は mastache のような構文を使用します。一般的に使用されるバインディング構文は、次のカテゴリに分類されます。
•{{ data }} {{ data filter}} などの mastache 構文
• v-bind: href、v-bind: などの v-bind バインディング属性class
• v-on:click、v-on:submit などの v-on バインディング イベント

、v-* はディレクティブです

例:

プロパティ計算

Vue は、他のプロパティによって計算されるプロパティを指定できる興味深いプロパティ計算構文をサポートしているため、実装するために $watch を使用する必要はありませんit:

var vm = new Vue({
 el: '#example',
 data: {
 a: 1
 },
 computed: {
 // a computed getter
 b: function () {
 // `this` points to the vm instance
 return this.a + 1
 }
 }
})

# # プロセス制御とリスト関連の構文には、`v-if`、`v-show`、`v-else`、`v-for` が含まれます

Form

双方向データバインディング:

## アニメーションアニメーションは、Angular や React と同じようにクラスを追加、削除することで実装されます。 # コンポーネント

コンポーネントの基本的な使い方

コンポーネントの定義には 2 つの部分が含まれます:

1 コンポーネント クラスを作成します:

var Profile = Vue.extend({
 template: "<div> Lily </div>"
});

2 タグ名を登録します:

Vue.component("me-profile", Profile ) ;

したがって、タグ名を通じてそのようなコンポーネントを使用できます:

<div id="todo">
 <my-profile></my-profile>
 <form v-on:submit="add" v-on:submit.prevent>
 <input type="text" v-model="input"/>
 <input type="submit" value=&#39;add&#39; />
 </form>
 ...
</div>

Vue.component("me-profile", Profile); 特定のページでのみ使用される場合は、グローバル登録に属します。メソッド:

var vm = new Vue({
 el: "#todo",
 components: {
 "my-profile": Profile
 },
 ...
}

Vue インスタンスは todo 要素にバインドされているため、この要素の外側に my-profile を配置することは無効です。この Vue インスタンスはブート初期化されます。

注意:

Vue コンストラクターに渡すことができるパラメーターは基本的に Vue.extend で使用できますが、異なる間で同じオブジェクトが共有されることを避けるために、2 つのパラメーター el と data に注意する必要があります。インスタンスでは常に渡す必要があります 関数が新しいオブジェクトを返す方が信頼性が高くなります:

var MyComponent = Vue.extend({
 data: function () {
 return { a: 1 }
 }
})

パラメーターが同じなので、実際には同じものですが、一方はコンポーネントであり、もう一方は Vue をガイドするために使用されます始めること。

テンプレートに関する注意事項

Vue はネイティブ DOM であるため、一部のカスタム タグは DOM 標準に準拠していない可能性があります。たとえば、テーブル内の tr をカスタマイズする場合、my-component を直接挿入することは仕様に準拠しません。したがって、次のように書く必要があります:

<table>
 <tr is="my-component"></tr>
</table>

Props pass data

Vue では、各コンポーネントは独立しており、親クラスのデータに直接アクセスすることはできませんし、アクセスすべきではありません。つまり、props を介してサブコンポーネントにデータを渡すのですが、これは React に似ていますか?

React とは異なり、Vue のサブコンポーネントは最初に独自の props を宣言する必要があります:

var Profile = Vue.extend({
 props: ["name"],
 template: `
 <h2 id="name-s-nbsp-Todo-nbsp-List">{{name}}&#39;s Todo List</h2>
 <h4 id="name-nbsp-is-nbsp-a-nbsp-good-nbsp-girl">{{name}} is a good girl</h4>
 `
});

その後、Profile を使用するときに次のようなパラメーターを渡すことができます:

このメソッドはリテラルを介してパラメータを渡すため、渡される値は文字列である必要があります。もう 1 つの方法は、v-bind を介してパラメータを動的に渡すことです。これにより、データを 2 方向にバインドしたり、文字列以外のパラメータを渡すことができます。

v-bind 文字列の場合、親コンポーネントのデータ内の対応するフィールドにバインドされます。たとえば、上記は双方向にバインドされた入力の値です。数値の場合は、数値にバインドされます。

Vue は、一方向または双方向のデータ バインディングを明示的に指定することもできます:

<!-- default, one-way-down binding -->
<child :msg="parentMsg"></child>
 
<!-- explicit two-way binding -->
<child :msg.sync="parentMsg"></child>
 
<!-- explicit one-time binding -->
<child :msg.once="parentMsg"></child>

Props の検証

優れたコンポーネントは、パラメーターが最初に正しいかどうかを常に検証する必要があり、場合によってはデフォルト値の設定も必要です。一部のパラメータ:

var Profile = Vue.extend({
 input: {
 type: String
 }
});

親子コンポーネント通信

上面讲到的 props 其实就是父组件向子组件传递消息的一种方式。 
在子组件中有一个 this.$parent 和 this.$root 可以用来方法父组件和根实例。不过，现在我们应该避免这么做。因为组件本身就是为了封装独立的逻辑，如果又去直接访问父组件的数据就破坏了组件的封装性。 
所以我们应该还是应该通过父组件向子组件传递 props 的方式来通信。

当然 props 其实只能做回调。在 React 中就探讨过这个问题，React 的做法就是通过 props 来做，传一个回调函数给子组件。其实我不是很喜欢这种把回调函数传来传去的方式，我更喜欢的是事件的方式。Vue 中子组件可以通过通过事件和父组件进行通信的。向父组件发消息是通过 this.$dispatch，而向子组件发送消息是通过 this.$boardcast，这里都是向所有的父亲和孩子发送消息，但是一旦执行一个回调之后就会停止，除非这个回调函数显式返回了 true。

我们把之前的Todo List拆成不同的组件来实现，这样可以体验下如何进行组件的双向通信，我们拆分出两个组件，分别是 List 和 Form 。

Form 负责处理用户输入，并在提交表单的时候向父组件发送一个 add 消息，代码如下:

var Form = Vue.extend({
 props: {
 username: {
 type: String,
 default: "Unnamed"
 }
 },
 data: function() {
 return {
 input: "",
 };
 },
 template: `
 <h1 id="username-s-nbsp-Todo-nbsp-List">{{username}}&#39;s Todo List</h1>
 <form v-on:submit="add" v-on:submit.prevent>
 <input type="text" v-model="input"/>
 <input type="submit" value=&#39;add&#39; />
 </form>
 `,
 methods: {
 add: function() {
 this.$dispatch("add", this.input); //这里就是向父组件发送消息
 this.input = "";
 }
 }
});

 List 只负责展示列表和处理用户勾选操作，它接收到 add 消息之后会在自己上添加一个条目：

var List = Vue.extend({
 template: `
 <ul>
 <li v-for=&#39;todo in list&#39;>
 <label v-bind:class="{ done : todo.done }" >
  <input type="checkbox" v-model="todo.done"/>
  {{todo.title}}
 </label>
 </li>
 </ul>`,
 props: {
 initList: {
 type: Array
 }
 },
 data: function() {
 return {
 list: []
 }
 },
 events: {
 add: function(input) {
 if(!input) return false;
 this.list.unshift({
 title: input,
 done: false
 });
 }
 }
});

 然后，因为这是两个组件，当然需要一个 Vue 实例来引导启动，我们的实例如下：

var vm = new Vue({
 el: "#todo",
 components: {
 "todo-form": Form,
 "todo-list": List
 },
 events: {
 add: function(input) {
 this.$broadcast("add", input);
 }
 }
});

 注意，其实 Form 和 List 在逻辑上是平级的组件，所以他们没有父子关系，他们共同都是 vm 的孩子。这里 vm 接到 Form 的消息之后会转发给 List。

html 代码就更简单了：

<div id="todo">
<todo-form username=&#39;Lily&#39;></todo-form>
<todo-list></todo-list>
</div>

 Slot

通过 Slot 可以实现把父组件渲染出来的HTML插入到子组件中，目前还不清楚什么时候会需要这样做，而且这么做对子组件的侵入性太大。

动态切换组件

这个功能感觉有点多余，感觉很多情况下我们应该是通过逻辑代码来实现切换，而不是通过Vue内置的动态组件来切换。不过用来实现一个类似 tab 切换的功能还是很方便的。

我们这里给 Todo List 增加一个 about 页面。那么首先我们需要把 vm 改成一个组件，这个组件叫 Todo，它就是整个 Todo 页面：

var Todo = Vue.extend({
 template: `
 <div id="todo">
 <todo-form username=&#39;Lily&#39;></todo-form>
 <todo-list></todo-list>
 <slot>not show</slot>
 </div>
 `,
 components: {
 "todo-form": Form,
 "todo-list": List
 },
 events: {
 add: function(input) {
 this.$broadcast("add", input);
 }
 }
});

 

 其实改动就第一行。

然后我们需要创建一个 About 组件：

var About = Vue.extend({
 template: `
 <div id="about">
 <p>About Todo List V0.1.0</p>
 <p>Content here</p>
 </div>`
});

 接下来是重点了，我们要创建一个实例 vm，这vm要负责切换这两个页面：

var vm = new Vue({
 el: "body",
 data: {
 currentView: "todo"
 },
 components: {
 "todo": Todo,
 "about": About
 }
});

 这里我们定义了一个 currentView 字段，当然可以是任意名称，然后通过特殊的 component 标签来进行组件切换：

<component :is="currentView"></component>
 <ul>
 <li><label><input type="radio" name=&#39;page&#39; value=&#39;todo&#39; v-model=&#39;currentView&#39;> Home</label></li>
 <li><label><input type="radio" name=&#39;page&#39; value=&#39;about&#39; v-model=&#39;currentView&#39;> About</label></li>
 </ul>

 上面的代码有两处需要注意：
 •通过 component这个特殊标签，然后用 :is 属性来进行组件的切换。
 •radio 通过双向绑定来修改 currentView 字段，从而实现点击之后就可以进行切换。

数据绑定的实现原理

Vue 把双向绑定称作 reactive，可以翻译为响应式数据绑定。内部是通过 ES5 定义的 getter 和 setter 方法实现的，所以不支持 IE8 及以下浏览器，这种实现方式有两个容易犯错的地方：
 •如果在 data 上直接添加和删除属性是无法被检测到的，一般删除是不会的，但是可能会动态添加，这个时候应该通过 vm.$set(“name”, value) 的方式来添加。
 •无法检测到对象内部的变化，也就是只能检测 data 的属性变化，如果 data.a 是一个对象，那么 data.a.b = 1 这种变化是无法被检测到的。这种情况下应该创建一个新的对象并赋值给 data.a 就行了。 

异步更新机制

Vue 对DOM的更新是异步的！ 这个异步是在一个异步队列中进行的，不过这个异步队列会在当前的 Event Loop 中执行完，所以如果修改了 Data 立刻去DOM中做查询操作是不对的，这个时候DOM还没有更新，正确的做法是这样做：

vm.msg = 'new message' // change data
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
 vm.$el.textContent === 'new message' // true
})

 或者这样：

vm.$nextTick(function () {
 this.$el.textContent === 'new message' // true
})

 花了半天时间才看完组件，下面应该去看一下另一个重点： Directive

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

更多X深入探讨Vue.js组件和组件通信相关文章请关注PHP中文网！