手把手教你VUE从入门到放弃—— 篇四（组件化思想,全局组件及局部组件）

Z时代
2024-01-10
分类：综合

vue

所谓组件化思想，顾名思义就是化繁为简，把一个整体拆成多个模块，一个模块为一个组件来实现。

全局组件:使用Vue.component("组件名",{
           props:['属性名'],
           template:'html模板'
       });
如下图

源码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件</title>
    <script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
       <input type='text' v-model='inputVal'/>
       <button @click='addToList'>提交</button>
       <ul >
           <todo-item v-bind:con1="item" v-for="item in list"></todo-item>
       </ul>
   </div>
   <script>
       Vue.component("TodoItem",{
           props:['con1'],
           template:'<li>{{con1}}</li>'
       });
       var app = new Vue({
           el:'#app2',
           data:{
               list:[],
           inputVal : ''
           },
           methods:{
               addToList:function(){
                   this.$data.list.push(this.inputVal);
                   this.inputVal = '';
               }
           }
       });
   </script>
</body>

</html>

局部组件，如下图，对比上面全局组件看看啥差别,个人喜欢用全局组件

源码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>局部组件</title>
    <script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
       <input type='text' v-model='inputVal'/>
       <button @click='addToList'>提交</button>
       <ul >
           <com v-bind:con1="item" v-for="item in list"></com>
       </ul>
   </div>
   <script>
       var com = {
           props:['con1'],
           template:'<li>{{con1}}</li>'
       };
       var app = new Vue({
           el:'#app2',
           data:{
               list:[],
           inputVal : ''
           },
           components:{
               com:com
           },
           methods:{
               addToList:function(){
                   this.$data.list.push(this.inputVal);
                   this.inputVal = '';
               }
           }
       });
   </script>
</body>

</html>