前端应用_Vue_通过emit事件调用向父组件传值

最新推荐文章于 2024-05-11 06:17:10 发布

上海_彭彭

最新推荐文章于 2024-05-11 06:17:10 发布

阅读量523

点赞数

分类专栏： Vue.js 文章标签： Vue emit

本文链接：https://blog.csdn.net/qq_34979346/article/details/99647882

版权

Vue.js 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

子组件如果想修改父组件的属性是不可能的，也不推荐，不能直接改难道就没有办法呢

难不了，优秀的vue 同学，先看张图吧

在这里插入图片描述

从这张图可以看出两个问题
1.父传值给子需要用 props ，
2. 子传值给父需要 emit 事件.

看下边实例吧，我自己学的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >

   <link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>

</head>
<body>
<div id="pp"  >
<!--把父组件的方法绑定到func-->
<login v-bind:parmsg="msg"   @func="show"></login>

      </div>

<template id="tmp1">
<!--调用了子组件的myclick方法-->
     <input  type="button" value="请点击" @click="myclick"  >    
</template>


<div>
    <script>
        var login= {   // 设置子组件对象
        template:'#tmp1',
        props:['parmsg'],
            data(){
            return {
                son:{
                    name:30,
                    age:20
                }
            }
            },
            methods: {
            myclick(){        //定义子方法
                this.$emit('func',this.son)   //通过emit 进行把值传入func
            }
            }
    }
  var vue=new Vue({
    el:'#pp',
    data: {
        son:'',
    msg:'我是父组件'
    },
      methods:{
        show(data){
            alert(data.name)
            alert(data)
            this.son=data
            alert("传递的值"+this.son.age)
        }
      },
    components:{  //创建子组件
    login: login,
    }
    }
    )
    </script>
</div>
</body>
</html>

上海_彭彭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端应用_Vue_通过emit事件调用向父组件传值

子组件如果想修改父组件的属性是不可能的，也不推荐，不能直接改难道就没有办法呢难不了，优秀的vue 同学，先看张图吧从这张图可以看出两个问题1.父传值给子需要用 props ，2. 子传值给父需要 emit 事件.看下边实例吧，我自己学的：<!DOCTYPE html><html lang="en"><head> <m...
复制链接

扫一扫