Vue入门:: this.$emit:Vue父子组件传值(子父之间的通信)和splice()方法的用法

vue中子组件跟父组件通信需要使用this.$emit(),我们先来回顾一下,父组件和子组件的通讯使用什么呢?a.父组件向子组件传值：通过v-bind:的形式进行数据的传递(可直接简写为冒号) 然后子组件使用props来接收如:// 父组件<todo-item v-bind:item="item"v-bind:index="index"v-for="(item,index) in list

第一段代码

5616人浏览 · 2020-08-12 17:19:03

第一段代码 · 2020-08-12 17:19:03 发布

vue中子组件跟父组件通信需要使用this.$emit(),我们先来回顾一下,父组件和子组件的通讯使用什么呢?

a.父组件向子组件传值：通过v-bind:的形式进行数据的传递(可直接简写为冒号) 然后子组件 使用props来接收
如:
// 父组件
<todo-item v-bind:item="item"
           v-bind:index="index"
           v-for="(item,index) in list"></todo-item>
// 子组件
var TodoItemValue = {
        props: ['item','index'],// 'item','index'就是父组件通过v-bind向子组件传递的
        template:"<li>{{item}}{{index}}</li>"
    } 
b.子组件向父组件传值?  这个时候就需要用到this.$emit()方法了

子组件向父组件传值,基本流程如下:

1.先在子组件中定义一个事件@click='itemClick'

template:"<li @click='itemClick'>{{item}}</li>"
// 这部分就是实际的子组件,注意里面现在定义了一个itemClick点击事件,这个事件的响应实现,是在自定义组件的methods中实现的

// methods就是实现子组件定义的点击事件,如itemClick
,methods:{
itemClick:function(){
this.$emit("delete",this.index);
}
}

var TodoItemValue = {
        props: ['item','index'],
        // 这部分就是实际的子组件,注意里面现在定义了一个itemClick点击事件,这个事件的响应实现,是在自定义组件的methods中实现的
        template:"<li @click='itemClick'>{{item}}</li>"   
        // methods就是实现子组件定义的点击事件,如itemClick
        ,methods:{
            itemClick:function(){
                this.$emit("delete",this.index);
            }
        }
    }

2.在自定义组件的子组件响应事件中通过this.$emit方法(this.$emit("delete",this.index))向父组件传递数据

this.$emit方法 - this.$emit("delete",this.index)

delete:$emit向父组件注册的事件delete

通过this.$emit会传递子组件的参数并相应触发父组件定义的$emit注册的事件delete

itemClick:function(){
                this.$emit("delete",this.index);
            }

Tips: this.index:就是传递的数据,注意这个子组件的index值同样是要先定义在props中,并用于获取html中的值

3.在父组件中注册通过emit定义事件<delete>

子组件通过this.$emit()触发并传递子组件参数,可以这个触发父组件哪里呢?所以我们需要在父组件相应定义并绑定一个事件delete来响应this.$emit("delete"),必须同名哦!

v-on:delete="handleItemClick"

其中delete是子组件向父组件注册的通讯事件,而handleItemClick则是父组件的响应通讯事件的实际处理事件,里面可以接收子组件传递的值

<todo-item v-bind:item="item"
                        :index="index"
                        //v-on:delete就是响应子组件绑定的事件,然后立即给出响应后的处理事件handleItemClick,这个就需要在父组件的methods方法具体实现了
                        v-on:delete="handleItemClick"
                       v-for="(item,index) in list"></todo-item>

4.通过父组件注册事件获取数据

handleItemClick则是父组件的响应通讯事件的实际处理事件,里面可以接收子组件传递的值

我们在父组件的methods中实现注册的响应事件handleItemClick,index就是子组件传递的数据

methods:{
            handleItemClick: function(index){
                alert('父组件响应事件'+index);   // 方法中的index就是接受子组件传递数据
            }
        }

5 完整示例代码(实例):

点击页面的li标记后,会将当前的点击li值从组件中删除,这样页面就实现了点击某个元素后自行删除的效果(因为VUE是数据层面的操作,所以看不到我们通过js操作dom的写法,它直接从数据层删除了)

5-1 splice()方法

知识扩展:删除,我们只需要知道列表数组的下标就行了,在本处,父组件接收的就是列表的下标,然后删除的方法,我们使用了splice(),它会实际的改变数据的原值.

Vue中splice的使用：

　　splice(　index,　len,　[item]) 用来删除/替换/添加数组内某一个或者几个值（该方法会改变原始数组）。

　　　　参数：index：数组开始下标
　　　　　　　len：替换/删除的长度
　　　　　　　item：替换的值，删除操作的话item为空

5-2 代码实例

<!DOCTYPE html>
<html>
<head>
    <title>TODO LIST</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="inputValue"/>
        <input v-on:click="handleBtn" type="button" value="提交">
        <ul>
            <!-- <li v-for="item in list">{{item}}</li> -->
            <todo-item v-bind:item="item"
                        :index="index"
                        v-on:delete="handleItemClick" // 子组件向父组件通讯事件绑定及通讯事件的处理事件
                       v-for="(item,index) in list"></todo-item>
        </ul>
    </div>
</body>
</html>
<script type="text/javascript">
    // 局部组件
    var TodoItemValue = {
        props: ['item','index'],// 和全局组件一样,props中的属性值是html的v-bind中绑定的
        template:"<li @click='itemClick'>{{item}}</li>"// 定义子组件点击事件
        ,methods:{
            itemClick:function(){//子组件点击响应事件
                this.$emit("delete",this.index);//通过emit向父组件注册通讯事件并传递参数index
            }
        }
    }
    var app = new Vue({
        el:"#app",
        // 注册局部组件
        components:{
            TodoItem:TodoItemValue   // components第一个值TodoItem是html中使用的标签组件名,第二个TodoItemValue则是局部组件声明对象名
        },
        data:{
            list:["第一课的内容","第二课的内容"]
            ,inputValue:''
        },
        // 响应事件要定义在vue的methods方法中
        methods:{
            handleBtn: function(){
                this.list.push(this.inputValue);// 获取当前实例-app,data下的inputValue值,通过this即可
                this.inputValue = ''; // 点击后清空v-model绑定的输入框
            }
            ,handleItemClick: function(index){//响应子组件向父组件通讯处理事件
                // alert('父组件响应事件'+index);
                this.list.splice(index,1);
            }
        }
    })
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^