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

最新推荐文章于 2023-07-08 22:55:54 发布

慕斯-ing

最新推荐文章于 2023-07-08 22:55:54 发布

阅读量366

点赞数 1

分类专栏： Vue2.x 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/blbyu/article/details/126416635

版权

Vue2.x 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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>TodoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
</head>
<body>
   <!-- 组件化改造内容：list标签组件化 -->
   <div id="app">
       <input type="text" v-model="inputValue">
       <button v-on:click="handleBtnClick">提交</button>
       <ul>
           <!-- todo-item就是组件名TodoItem，这里不区分大小写 -->
           <!-- v-bind绑定值 3@delete事件绑定，item是数组的内容，index是数组的下标-->
           <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:"<li @click='handleItemClick'>{{content}}</li>",       // 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>