小白初学Vue之组件与实例的关系初试篇

Posted 2020-11-21 xiaowanzijun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小白初学Vue之组件与实例的关系初试篇相关的知识，希望对你有一定的参考价值。

内容：组件和实例

一、组件和实例的关系

先看下之前的代码，来看下整体的架构

 1 <!DOCTYPE html>
 2 <html>
 3 
 4  <head>
 5   <meta charset="UTF-8">
 6   <title>拆分组件</title>
 7   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
 8  </head>
 9  <style>
10   button {
11    background: blue;
12    height: 32px;
13    width: 120px;
14    border: 1px solid blue;
15    color: #FFFFFF;
16    margin-top: 20px;
17    font-size: 14px;
18   }
19  </style>
20 
21  <body>
22    <div id="root">
23      <input type="text" name="" id="" v-model="msg" />
24      <button @click="add">添加</button>
25      <!--list显示-->
26      <ul>
27         <li-cell v-for="(item ,index) of list" :key="index" :content="item"></li-cell>
28      </ul>
29 
30     </div>
31     <script type="text/javascript">
32      // 全局组件
33      Vue.component(‘li-cell‘, {
34          props: [‘content‘], // 添加content属性后
35          template: "<li>{{content}}</li>" // 添加content属性后
36      });
37      new Vue({
38         el: "#root",
39         data: {
40             msg: "",
41             list: [],
42         },
43        methods: {
44            add: function() {
45            this.list.push(this.msg);
46            this.msg = "";
47        }
48     }
49    });
50   </script>
51  </body>
52 
53 </html>

先看下整体结构 :

我们先看下最外层的这个Vue实例。它的挂载点是在id为root的div ，而这个div内的内容就是这个实例的模板我们可以这样认为。

再看下我们创建的组件，你可以尝试把实例中的相关属性都在添加下再你创建的组件中测试下，你会发现“组件其实就是实例”。即你可以在你创建的组件中添加data、methods..等属性。

二、父组件与子组件之前的交互

示例：删除功能

 1 <!DOCTYPE html>
 2 <html>
 3 
 4  <head>
 5   <meta charset="UTF-8">
 6   <title>通过简单的删除功能来理解父组件与子组件之间的数据传递</title>
 7   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
 8  </head>
 9  <style type="text/css">
10   button {
11    font-size: 14px;
12    background: skyblue;
13    border: 1px solid skyblue;
14    width: 100px;
15    height: 30px;
16    border-radius: 4px;
17   }
18  </style>
19 
20  <body>
21   <!--实现效果点击li删除-->
22   <div id="root">
23    <input type="text" v-model="msg" />
24    <button @click="add">添加</button>
25    <ul>
26     <itme-cell v-for="(item,index) of list" :key="index" :index="index"  :content="item" @delete="handle"></itme-cell>
27    </ul>
28   </div>
29   <script>
30   // 一般的删除思路：点击li,找到当前li的父级ul，进行删除；
31  
32   // 该组件是子组件
33   Vue.component(‘itme-cell‘,{
34     props:[‘content‘,‘index‘] ,// 接受父组件传递过来的索引index
35    template:‘<li @click="deleteLi">{{content}}</li>‘,// 我们先给li绑定删除事件
36    methods:{// 当li被点击时，会触发deleteLi
37     deleteLi:function(){
38 //      alert(this.index);
39       this.$emit(‘delete‘,this.index);// 此处表示向外触发删除事件，即父组件中的delete事件，并同时把索引传递给父组件。从而让父组件去执行handle 的方法;
40     }
41    }
42   });
43    
44   // 最外层的vue实例是父组件
45    new Vue({
46     el: ‘#root‘,
47     data: {
48      msg: "",
49      list: []
50     },
51     methods:{
52      add:function(){// 当添加按钮别点击时会触发该add方法
53       this.list.push(this.msg); // 因为input值与实例中data的msg变量进行了双向绑定，所以此处的意思就是：只要点击添加按钮，就会获取input中的值，并把这个值添加到list数组中。然后现在是list数据已经存在了，就在模板中调用v-for对数据进行循环加载即可
54       this.msg="";// 每次添加完成都会清空下input中的值
55      },
56      handle:function(){
57        // 把数据移除注意此处一定要是this.index,否则会报错 ..index not defined..   
58       this.list.splice(this.index,1);// splice(索引，要移除的个数)； 
59       //我自己写的时候其实是有疑问的，一般的开发我们删除数据之后还要把当前的dom也在页面中移除掉。但是为什么此处不用呢？我现在只知道这个方法是vue更改后的，如果调用删除数组元素的方法vue就会自动更新视图，这块我还是不清楚，有知道望解惑下！
60      }
61     }
62    });
63   </script>
64  </body>
65 
66 </html>