12 组件化的语法糖

vue组件相关

语法糖的写法

<div id="app">
   <!--3 使用组件-->
   <!--全是小写的-->
   <cpn2></cpn2>
</div>

<script src="../js/vue.js"></script>
<script>
//语法糖 注册全局组件
Vue.component('cpn1',{
 template:`
<div>
<h1>组件2</h1>
</div>
`,
});

//root组件
const app=new Vue({
 el:'#app',
 data:{
   message:'你好呀'
 },
 computed:{
 },
 methods:{
 },
//  语法糖 局部组件
 components:{
   'cpn2':{
     template:`
<div>
<h1>组件2</h1>
<cpn1></cpn1>
</div>
`,
   }
 }
})

</script>

模板的分离写法

<!--1. script标签，注意：类型必须是text/x-template-->
<!--<script type="text/x-template" id="cpn">-->
<!--<div>-->
   <!--<h1>组件2</h1>-->
<!--</div>-->
<!--</script>-->

<!--2. template标签-->
<template id="cpn">
   <div>template</div>
</template>

<script src="../js/vue.js"></script>
<script>
//语法糖 注册全局组件
Vue.component('cpn1',{
 template:'#cpn'
});

//root组件
const app=new Vue({
 el:'#app',
 data:{
   message:'你好呀'
 },
 computed:{
 },
 methods:{
 },
//  语法糖 局部组件
 components:{
 }
})
</script>

组件数据

组件不能访问Vue实例数据

Vue组件应该有自己保存数据的地方

组件对象也有一个data属性，也可以有methods等属性

data属性必须是一个函数

而且这个函数返回一个对象，对象内部保存数据

<!--2. template标签-->
<template id="cpn">
   <div>{{title}}</div>
</template>

<script src="../js/vue.js"></script>
<script>
<!--组件中的数据存放问题-->
Vue.component('cpn1',{
 template:'#cpn',
 data(){
   return{
     title:'abc'
   }
 }
});

//root组件
const app=new Vue({
 el:'#app',
 data:{
   message:'你好呀'
 },
 computed:{
 },
 methods:{
 },
//  语法糖 局部组件
 components:{
 }
})

</script>

组件方法

<div id="app">
   <!--3 使用组件-->
   <!--全是小写的-->
   <!--不共用同一个data-->
   <cpn></cpn>
   <cpn></cpn>
</div>
<!--2. template标签-->
<template id="cpn">
   <div>
       <h2>当前计数：{{counter}}</h2>
       <button @click="increment">+</button>
       <button @click="decrement">-</button>
   </div>
</template>

<script src="../js/vue.js"></script>
<script>
const obj=0;
<!--注册组件-->
Vue.component('cpn',{
 template:'#cpn',
 data(){
   return{
     counter:0
//      counter:obj  这个会引起连锁反应
   }
 },
 methods:{
   increment(){
     this.counter++;
   },
   decrement(){
     this.counter--;
   }
 }
});

//root组件
const app=new Vue({
 el:'#app',
 data:{
   message:'你好呀'
 },
 computed:{
 },
 methods:{
 },
//  语法糖 局部组件
 components:{
 }
})

</script>