Vue中组件间的传值（子传父，父传子）

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TodoListtitle>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js">script>
head>
<body>
   
   <div id="app">
       <input type="text" v-model="inputValue">
       <button v-on:click="handleBtnClick">提交button>
       <ul>
           
           
           <todo-item v-bind:content="item" 
                      v-bind:index="index"
                      v-for="(item,index) in list" @delete="handleItemDelete">
            todo-item>
       ul>
   div>
    
   <script>
       // 父传子-在父组件使用子组件的地方通过v-bind进行传值，在子组件中通过props进行接受传过来的值。
       // 子传父-在子组件中通过$emit向外抛出一个事件，通过在父组件使用子组件的地方监听该事件，就要拿到子组件传过来的值。
       // 在写Vue代码的时候不要直接操作DOM，而是要通过数据的改变，让页面去自动更正变化。

       // 创建全局组件的一个方法Vue.component
       Vue.component('TodoItem',{
           props: ['content','index'],                    // 接收外部传入的v-bind:content的值，父组件todo-item向子组件TodoItem传值
           template:"{{content}}
",       // 1创建一个模板。v-on:click简写@click,v-bind:可以简写为:
           methods:{
               handleItemClick:function(){
                   this.$emit('delete',this.index)   // 2当点击子组件的时候，子组件会向外出发一个delete事件，在父组件中创建子组件的同时，可以去监听delete事件
               }
           }
       });

       var app = new Vue({
           el:'#app',
           data:{
               list:[],
               inputValue:''
           },
           methods:{
                handleBtnClick:function(){
                    this.list.push(this.inputValue); 
                    this.inputValue = '';  
               },
               handleItemDelete:function(index){   // 4定义删除方法，使用index作为参数
                    //    this.list = []  // 清空所有数据
                    this.list.splice(index,1) // 传入的数据下标减一
               }
           }
       })       
   script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

相关阅读:
Java：2022年招聘Java开发人员指南
（免费分享)基于springboot健康运动-带论文
docker搭建waline评论系统
java 多个 @Scheduled定时器不执行
7.堆内元组（HOT）和仅索引扫描
快速学习openCV-python的方法
LeetCode 第二天 977.有序数组的平方，209.长度最小的子数组，59.螺旋矩阵II
数学公式与随机数
了解模型开发与部署，看这里！
leetcode-268.丢失的数字

原文地址：https://blog.csdn.net/blbyu/article/details/126416635