Vue组件-组件组合

组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。

 1 <html>
 2   <head>
 3     <title>Vue组件 A 在它的模板中使用了组件 B的例子</title>
 4     <script src="vue.js"></script>
 5     <style type="text/css">
 6     </style>
 7   </head>
 8   <body>
 9     <div id="app">
10         <my-item :list="list"></my-item>
11     </div>
12 
13     
14     <script>
15      new Vue({
16        el:"#app",
17        data:{
18          list:["第一项","第二项","第三项"]
19        },
20        components:{
            // 组件A
21          "my-item":{
22             template : `
23                     <div>
24                       <ul>
25                         <li v-for="item in list">{{ item }}</li>
26                       </ul>
27                       <my-list :list="list"></my-list>
28                     </div>
29             `,
30              props:['list'],
31              
32              components:{
                  // 组件B
33                "my-list":{
34                   template : `
35                      <div>
36                        <ul>
37                         <li v-for="item in list">{{ item }}</li>
38                       </ul>
39                      </div>
40                   `,
41                   props:['list']
42                }
43 
44              }
45             
46          },
47        }
48      })
49     </script>
50   </body>
51 </html>

在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的。

Prop

使用 Prop 传递数据

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。

我们来看一个例子：

 1 <html>
 2   <head>
 3     <title>Vue子组件的模板内直接引用父组件的数据</title>
 4     <script src="vue.js"></script>
 5     <style type="text/css">
 6     </style>
 7   </head>
 8   <body>
 9     <div id="app">
10       <child></child>
11     </div>
12 
13     
14     <script>
15        new Vue({
16          el:"#app",
17          data:{
18            message:"Hello"
19          
20          },
21          components:{
22            "child":{
23               template:"<p>{{ message }}</p>" 
24            }
25          
26          } 
27        
28        })
29     </script>
30   </body>
31 </html>

这样子组件直接引用父组件的数据会出错！

子组件要显式地用 props 选项声明它预期的数据：

 1 <html>
 2   <head>
 3     <title>Vue props父子之间通信</title>
 4     <script src="vue.js"></script>
 5     <style type="text/css">
 6     </style>
 7   </head>
 8   <body>
 9     <div id="app">
10       <child message="Hello Vue!!!"></child>
11     </div>
12 
13     
14     <script>
15        new Vue({
16          el:"#app",
17          components:{
18            "child":{
19               template:"<p>{{ message }}</p>" ,
20               props:['message']
21            },
22          } 
23        
24        })
25     </script>
26   </body>
27 </html>

这样就可以正常显示我们想要的结果

模板的要求

注意：组件的模板只能有一个根元素。下面的情况是不允许的。

template: `<div>这是一个局部的自定义组件，只能在当前Vue实例中使用</div>
            <button>hello</button>`,

camelCase vs. kebab-case

HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)：

  <div id="example">
      <child myMessage="Hello Vue!!!"></child>
  </div>
    
    <script>
       new Vue({
         el:"#example",
         components:{
           "child":{
              template:"<p>{{ myMessage }}</p>",
              props:["myMessage"]
           }
         }
       })
    </script>

这样就会报错

应改为

 <div id="example">
      <child my-Message="Hello Vue!!!"></child>
</div>

动态prop:

与绑定到任何普通的 HTML 特性相类似，我们可以用 v-bind 来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件：

 1 <div id="example">
 2        <input v-model="parentMsg"><br>
 3        <child :message="parentMsg"></child>
 4     </div>    
 5     <script>
 6       Vue.component("child",{
 7          template:"<span>{{ message }}</span>",
 8          props:["message"]
 9       
10       })
11       new Vue({
12          el:"#example",
13          data:{
14            parentMsg:""
15          }
16       })
17     </script>

浏览器打开显示

如果你想把一个对象的所有属性作为 prop 进行传递，可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。

这句话怎么理解呢？我们看一个例子

1 <div id="app">
2   <my-component v-bind="todo"></my-component> <!--重点就是这-->
    <!--不用将对象的属性写成 v-bind:first="todo.first" v-bind:second="todo.second"-->

3 </div>

Vue.component("my-component", {
   template: "<div><span>第一个值是:{{first}},第二个值是:{{ second }}</span></div>",
   props:["first","second"]
})
new Vue({
  el:"#app",
  data:{
    todo:{
       first:"Hello world",
       second:"Hello Vue"
    }
  }
})

字面量语法 vs 动态语法

初学者常犯的一个错误是使用字面量语法传递数值：

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>

因为它是一个字面量 prop，它的值是字符串 "1" 而不是一个数值。如果想传递一个真正的 JavaScript 数值，则需要使用 v-bind，从而让它的值被当作 JavaScript 表达式计算：

<!-- 传递真正的数值 -->
<comp v-bind:some-prop="1"></comp>

例子如下:

 <div id="example">
      <child num1="4" v-bind:num2="4"></child>    
    </div>
    <script>
     Vue.component("child", {
        template:"<p>使用了字面量传递数值+2得出结果:{{num1 + 2}}<br>使用了动态语法传递数值+2的结果:{{num2 + 2}}</p>",
        props:["num1","num2"]
     })
     new Vue({
       el:"#example",
     })
    </script>

浏览器打开显示:

单向数据流

Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

 1 <html>
 2   <head>
 3     <title>Vue单向数据流</title>
 4     <script src="vue.js"></script>
 5   </head>
 6   <body>
 7     <div id="example">
 8       <my-button :count="count"></my-button>
 9     </div>
10     <script>
11      Vue.component("my-button", {
12         props:["count"],
13         template:"<button @click='changeMessage'>{{ count }}</button>",
14         methods:{
15            changeMessage:function(){
16              this.count++     
17            }
18         }
19      })
20      new Vue({
21        el:"#example",
22        data:{
23          count:0
24        }
25      })
26     </script>
27    
28   </body>
29 </html>

虽然想要做的功能实现了但vue报了个错,你不应该在子组件内部改变 prop

在两种情况下，我们很容易忍不住想去修改 prop 中数据：

Prop 作为初始值传入后，子组件想把它当作局部数据来用；
Prop 作为原始数据传入，由子组件处理成其它数据输出。

上面的例子就是第一种情况子组件怎么把它当局部数据用？

定义一个局部变量，并用 prop 的值初始化它：

 data:function(){
       return {
             initCount: this.count
          }
        }

 1 <html>
 2   <head>
 3     <title>Vue单向数据流</title>
 4     <script src="vue.js"></script>
 5   </head>
 6   <body>
 7     <div id="example">
 8       <my-button :count="count"></my-button>
 9     </div>
10     <script>
11      Vue.component("my-button", {
12         props:["count"],
13         template:"<button @click='changeMessage'>{{ initCount }}</button>",//别忘了这里也需要修改
14         data:function(){
15           return {
16             initCount: this.count
17           }
18         },
19         methods:{
20            changeMessage:function(){
21              this.initCount++     
22            }
23         }
24      })
25      new Vue({
26        el:"#example",
27        data:{
28          count:0
29        }
30      })
31     </script>
32    
33   </body>
34 </html>

这样就ok了!

第二种情况请看下面例子：

 1 <html>
 2   <head>
 3     <title>Vue单向数据流</title>
 4     <script src="vue.js"></script>
 5   </head>
 6   <body>
 7     <div id="example">
 8       <input v-model="message">
 9       <child :message="message"></child>
10     </div>
11     <script>
12       Vue.component("child", {
13         props:["message"],
14         template:"<p>{{ message }}</p>"
15       })
16       new Vue({
17         el:"#example",
18         data:{
19           message:"test" 
20         }
21       })
22     </script>
23   </body>
24 </html>

这是一个双向绑定的例子,我们如何把输入的值将它用p标签转化成大写显示出来！

computed:{
changeMessage:function(){
return this.message.trim().toUpperCase();
}
}

 1 <html>
 2   <head>
 3     <title>Vue单向数据流</title>
 4     <script src="vue.js"></script>
 5   </head>
 6   <body>
 7     <div id="example">
 8       <input v-model="message">
 9       <child :message="message"></child>
10     </div>
11     <script>
12       Vue.component("child", {
13         props:["message"],
14         template:"<p>{{ changeMessage }}</p>",
15         computed:{
16           changeMessage:function(){
17             return this.message.trim().toUpperCase();
18           }
19         }
20       })
21       new Vue({
22         el:"#example",
23         data:{
24           message:"test" 
25         }
26       })
27     </script>
28   </body>
29 </html>

props验证

我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。这对于开发给他人使用的组件非常有用。

<html>
  <head>
    <title>Vueprops验证</title>
    <script src="vue.js"></script>
  </head>
  <body>
    <div id="example">
     <child 
        :name="name" 
        :age="age"
        ></child>
    </div>
    <script>
     Vue.component("child", {
       props:{
         name:{
           type:String,
           default:"Vue",
           required:true
         },
         age:Number
       },
       template:"<p>同学叫{{ name }},年龄:{{ age }}</p>",
     })
     
     new Vue({
       el:"#example",
       data:{
         name:"胡小明",
         age:18,
       }
     })
    </script>
  </body>
</html>

就从这个简单的例子分析一下用法：

type:可以使用type来声明这个参数可以接受的数据的类型，当检查规则只有一个的时候type可以略写如

当参数可以是多种类型的其中一个的时候，使用数组来表示

message:[String,Number]

type可以是以下原生类型：

String

Number

Boolean

Function

Object

Array

Symbol

required:可以使用required选项来声明这个参数是否必须传入。如果是true则为必填项,如不填则报出警告

defaule:使用default选项来指定当父组件未传入参数时props变量的默认值：

validator:当校验规则很复杂，默认提供的校验规则无法满足的时候可以使用自定义函数来校验。(上面代码没有写这个例子)

举例当小明可以去网吧上网的时候必定年龄是>=18的

1 props:{
2    age:{
3       validator:function(value){
4            return value >= 18
5      }
6    }
7 
8 }