vue的组件基础

组件分为全局组件和局部组件。

组件的核心是template；所有的数据都为template服务。

父组件子组件传值：因为子组件是父组件的个标签，完全等同于添加动态属性；

然后子组件能够通过props：[  ]获取，(注意，props必须是数组或者对象，而不能是字符串)

如果不通过props接受父组件穿过来的值，那么子组件会以行间样式的形式把值表现出来，如下

 

 

 1 <body>
 2     <div id="app">
 3         <my-template :trans='data1'></my-template>
 4     </div>
 5     <!-- <script src="../vue.js"></script> -->
 6     <script src="https://cdn.bootcss.com/vue/2.5.21/vue.common.dev.js"></script>
 7     <script>
 8         var myTemplate = {
 9             template: '<div> {{trans}} </div>',
10             props: {
　　
11                 trans: [Number, String ] //子组件对父组件传来的值进行约束，必须是数字,还可以是对象，有default，type，require，validator

12             }
13 
14         }
15         const vm = new Vue({
16             el: '#app',
17             data: {
18                 data1: 'aaa',
19             },
20             components:{
21                 myTemplate: myTemplate
22             }
23          
24         })
25 
26     </script>

 

posted @ 2019-01-09 16:50  当当和瓶瓶  阅读(212)  评论(0)  编辑  收藏  举报