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>
二、父组件与子组件之前的交互
示例：删除功能
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>