组件分为全局组件和局部组件。
组件的核心是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>