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

最新推荐文章于 2024-10-02 20:21:32 发布

原创最新推荐文章于 2024-10-02 20:21:32 发布 · 416 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #组件化思想 #全局组件 #局部组件

本文详细介绍了Vue.js中组件化的概念及其应用，包括全局组件和局部组件的创建与使用，展示了如何通过组件化思想提高代码复用性和维护性。

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

全局组件:使用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>