内容：组件和实例
一、组件和实例的关系
先看下之前的代码，来看下整体的架构
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>
通过上述代码可以得出：
1.最外层的Vue实例是父组件，Vue.component是子组件；
2.父组件---->子组件：
用上述代码来举例，父组件中的模板把content与index属性传递给子组件，子组件用props来接收2个属性；
3.点击子组件中的模板触发事件时，使用 this.$emit(‘delete‘,this.index);通知父组件触发delete事件并同时把index传递给父组件。
4.代码中“this.list.splice(this.index,1)”这个splice()是vue改写过的方法，调用后vue视图会自动更新。
感谢浏览至此，目前我也只是明白的它的意思，但是具体的还要深入了解，目前只能是了解阶段，皮毛都不算。有不对的地方，望指出，共提升，多谢~
原文地址：https://www.cnblogs.com/xiaowanzijun/p/9262489.html
时间： 2024-10-16 05:33:00