diff --git a/docs/vue2.html b/docs/vue2.html index e42f8953..6fbfa69f 100644 --- a/docs/vue2.html +++ b/docs/vue2.html @@ -874,7 +874,56 @@ <input v-model.trim="msg">

组件基础

-

基本示例

+

单文件组件

+ +
    +
  • 将 HTML/CSS/JS 三部分存放到一个 Hello.vue 文件中 +
    <template>
+  <p>{{ title }} World!</p>
+</template>
+<script>
+  export default {
+    name: 'Hello',
+    props: {
+      title: {
+        type: String,
+        default: 'Hello'
+      }
+    },
+    data: function() {
+      return {
+        greeting: "Hello"
+      };
+    }
+  };
+</script>
+<style scoped>
+  p {
+    font-size: 2em;
+    text-align: center;
+  }
+</style>
+
    +
    • +
  • 使用 Hello.vue 组件 +
    <script>
+  import Vue from "vue";
+  import Hello from "./Hello";
+
+  export default {
+    components: { Hello }
+  }
+</script>
+<template>
+  <div>
+    <Hello :title="'aaaa'"></Hello>
+  </div>
+</template>
+
    +
    • +
+ +

基本示例

Vue.component('button-counter', {
   data: function () {
@@ -906,24 +955,6 @@
   <button-counter></button-counter>
 </div>
-

data 必须是一个函数

-
data: function () {
-  return {
-    count: 0
-  }
-}
-
-

组件的 data 选项必须是一个函数

-

向子组件传递数据

-
Vue.component('blog-post', {
-  props: ['title'],
-  template: '<h3>{{ title }}</h3>'
-})
-
-

当值传递给一个 prop attribute 的时候，变成了组件实例的一个 property

-
<blog-post title="写博客"></blog-post>
-<blog-post title="如此有趣"></blog-post>
-

单个根元素

Vue.component('blog-post', {
   props: ['post'],
@@ -943,6 +974,24 @@
 >
 </blog-post>
+

向子组件传递数据

+
Vue.component('blog-post', {
+  props: ['title'],
+  template: '<h3>{{ title }}</h3>'
+})
+
+

当值传递给一个 prop attribute 的时候，变成了组件实例的一个 property

+
<blog-post title="写博客"></blog-post>
+<blog-post title="如此有趣"></blog-post>
+
+

data 必须是一个函数

+
data: function () {
+  return {
+    count: 0
+  }
+}
+
+

组件的 data 选项必须是一个函数

监听子组件事件

Vue.component('blog-post', {
@@ -952,8 +1001,7 @@
       <h3>{{ post.title }}</h3>
       <button
         v-on:click="$emit('enlarge-txt')"
-      >
-        Enlarge text
+      >放大文字
       </button>
       <div v-html="post.content"></div>
     </div>
@@ -994,10 +1042,20 @@

在组件上使用 v-model

+

自定义事件也可以用于创建支持 v-model 的自定义输入组件。

<input v-model="searchText">

等价于

-
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value">
+
<input
+  v-bind:value="searchText"
+  v-on:input="searchText = $event.target.value"
+>
+

+
当用在组件上时，v-model 则会这样：

+
<custom-input
+  v-bind:value="searchText"
+  v-on:input="searchText = $event"
+></custom-input>
 

 
为了让它正常工作，这个组件内的 <input> 必须：