VUE中父子组件之间的通信——子传父

最新推荐文章于 2024-07-12 21:26:02 发布

一个前端女子

最新推荐文章于 2024-07-12 21:26:02 发布

阅读量915

点赞数

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

本文链接：https://blog.csdn.net/qq_44173499/article/details/123448245

版权

Vue 父子组件 $emit 通信数据传递

关键词由CSDN通过智能技术生成

vue2 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

VUE中父子组件之间的通信——子传父

子传父：子组件里通过$emit('自定义事件名',变量1,变量2)触发事件

操作步骤：

step1：

在子组件的方法中心定义一个方法，在方法中用this.$emit自定义一个事件、传第自己方法中心的变量

Markup

this.$emit('myadd',this.title)

step2:

在父亲组件的方法中定义一个事件方法

Markup

methods: {
// 父组件接收子组件发射出来的数据
add:function(title){
this.list.push({
id:this.num++,
tit:title
})
console.log(this.list);
}
},

step3：

父组件对应视图层中子组件的标签上，触发子组件自定的事件去调用父组件自定的方法

Markup

<my-input @myadd="add"></my-input>

总结的来说，子组件中的$emit负责把子组件中的数组发射出去，父组件中的定义的方法负责接收这个数据（所以数据要有形参来接收数据），

具体代码：

Markup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>$emit()</title>
</head>
<body>
    <div id="app">
    <!-- 父组件触发myadd事件 。  @myadd="调用父组件中的方法"-->
        <my-input @myadd="add"></my-input>
        
        <my-list :list="list"></my-list>
    </div>
    <template id="myinput">
        <div>
        <p>我是myInput组件</p>
        <p>
            <input type="text" name="" id="" v-model="title">
            <input type="button" value="添加" @click="myadd">
        </p>
        </div>
    </template>
    
    <template id="mylist">
        <div>
            <p>我是mylist组件</p>
            <ul>
                <li v-for="item in mylist">{{item.tit}}</li>
            </ul>
        </div>
    </template>
<script src="js/vue.js"></script>
<script>
    let myInput = {
        template:'#myinput',
        data:function(){
            return{
                title:''
            }
        },
        methods:{
            myadd:function(){
            // console.log(this.title);
                this.$emit('myadd',this.title)
            }
        }
    }
    let myList ={
        props: {
            list:Array
        },
        data:function(){
            return{
                mylist:this.list
            }
        },
        template:'#mylist'
        }
        let vm = new Vue({
            el:'#app',
            data() {
                return {
                    num:2,
                    list:[
                    {id:1,tit:'妞妞'}
                    ]
                }
            },
            methods: {
            // 父组件接收子组件发射出来的数据
            add:function(title){
                this.list.push({
                    id:this.num++,
                    tit:title
                })
                console.log(this.list);
            }
            },
            components:{
                myInput,
                myList
            }
    })
</script>
</body>
</html>

一个前端女子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE中父子组件之间的通信——子传父

VUE中父子组件之间的通信——子传父子传父：子组件里通过$emit('自定义事件名',变量1,变量2)触发事件操作步骤：step1：在子组件的方法中心定义一个方法，在方法中用this.$emit自定义一个事件、传第自己方法中心的变量Markupthis.$emit('myadd',this.title)step2:在父亲组件的方法中定义一个事件方法Markupmethods: {// 父组件接收子组件发射出来的数据add:function(title){
复制链接

扫一扫

专栏目录