标签中is属性，可以规避html5规则的一些错误。
1 <div id="app"> 2 <table> 3 <!-- 表格中如果使用tr或类似这种多层包裹的，使用组件代替里面的内容，有可能出现生成的tr在tbody外--> 4 <tbody> 5 <row></row> 6 <!-- 通过is属性将组件指定好，就可以规避这个问题--> 7 <tr is="row"></tr> 8 </tbody> 9 </table> 10 </div> 11 <script src="../js/vue.js"></script> 12 13 <script> 14 // 定义全局组件 15 Vue.component('row',{ 16 template:'<tr>test</tr>' 17 }); 18 var vm = new Vue({ 19 el:'#app', 20 }) 21 </script>
父组件和子组件之间传递参数，子组件对参数进行校验
1 <div id="app">
2 <child content="test"></child>
3 </div>
4 <script src="../js/vue.js"></script>
5 <script>
6 Vue.component('child',{
7 template:'<div>{{content}}</div>',
8 // 父组件向子组件传递数据时，可以进行验证校验
9 props:{
10 content:{
11 // type 父组件向子组件传递的数据类型 列表可以写入多中类型判断
12 type: [String,Number],
13 // required 是否必须传
14 required: true,
15 default: '默认参数',
16 // 自定义校验规则 value参数是父组件传递进来的参数
17 validator:function (value) {
18 return (value.length>5)
19 }
20
21 }
22 }
23 });
24 var vm = new Vue({
25 el:'#app'
26 })
27 </script>
父组件向子组件传值
1 <div id="app">
2 //num2参数使用父组件的data属性
3 <number :num2="number2" num3="10"></number>
4 {{number2}}<input type="button" value="test" @click="change">
5 </div>
6
7 Vue.component('number',{
8 //父组件向子组件传参，存在单向数据流
9 props:['num2','num3'],//子组件通过props属性接收父组件的传值
10 template:'<div>子组件---<span>{{count}}--{{number3}}</span></div>',
11 data:function () {
12 return{
13 //子组件接收父组件的传值，需要在data中重新定义，保证这个传值父子组件不互相影响，起到隔离作用
14 count:this.num2,
15 number3:this.num3
16 }
17 }
18 });
19 new Vue({
20 el:'#app',
21 data:{
22 number2:99
23 },
24 methods:{
25 change:function () {
26 this.number2 = 100
27 }
28 }
29 })
父组件向子组件传值，在子组件中先定义属性在传值
全局组件中通过props以数组方式接收传递的参数
全局组件中，data方法必须在return中将父组件传过来的参数重新定义成子组件的属性，避免父、子组件传值相互不影响，起到隔离作用
因为num2和num3是父组件向子组件的传递参数，所以使用this.xxxx引用