Vue中利用$emit实现子组件向父组件通信

Vue中利用$emit实现子组件向父组件通信

父组件

<template>
    <div>
        <p>我是父组件</p>
        <child :isShow="show" @hidechild="hidechild"></child>
        <button @click="show=true">显示子组件</button>
    </div>
</template>

<script>
    import child from "./child"
    export default {
        date(){
            return{
                show:false
            }
        },
        components:{
            child
        },
        methods:{
            hidechild:function () {
                this.show=false
            }
        }
    }
</script>

子组件

<template>
    <div>
        <h2 v-show="isShow">我是子组件</h2>
        <button @click="hideMyself()">隐藏子组件</button>
    </div>
</template>

<script>
    export default {
        name:"child",
        props:{
            isShow:Boolean
        },
        methods:{
            hideMyself:function () {

                this.$emit('hidechild');

                //通过调用父组件的方法改变props中参数的内容
                //$emit(eventname,args); 可以携带参数
            }
        }
    }
</script>

原文地址:https://www.cnblogs.com/roseAT/p/11156656.html

时间: 2024-10-11 14:17:28

Vue中利用$emit实现子组件向父组件通信的相关文章

vue 解决双向绑定中 父组件传值给子组件后 父组件值也跟着变化的问题

说明: 近日开发中碰见一个很诡异的问题,  父组件动态的修改对象 data 中的值, 然后将这个对象 data 传给子组件, 子组件拿到后将 data 中的值 乘以 100 ,发现父组件中的值也跟着变化了,通过查阅资料,发现 是 VUE 双向绑定中的一个bug,就此给出解决办法,亲测有效 情景描述: 对象  data = { price: 0, flag: true, name: " 哈哈 " } 父组件 更改 data.parice = 100,   然后将 data对象 传给子组件

Vue 子组件调用父组件 $emit

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>Vue 子组件调用父组件 $emit</title>    </head>    <body>        <div id="app">            <table border="2

VUE中关于$emit的用法

一.事件 关于什么是JavaScript事件可以参考:https://www.w3schools.com/js/js_events.asp 二.$emit vue中对$emit的定义见: vm.$emit( eventName, [-args] ) 参数: {string} eventName [...args] 触发当前实例上的事件.附加参数都会传给监听器回调. 三.用途与示例 1.父组件可以使用 props 把数据传给子组件. 1.子组件可以使用 $emit 触发父组件的自定义事件. 子组件

vue子组件修改父组件传递过来的值

这里不再赘述父子组件及子父组件传值,不懂的同学可以翻看我以前写过的关于两者传值的文章 父子组件传值:https://www.cnblogs.com/Sky-Ice/p/9267192.html 子父组件传值:https://www.cnblogs.com/Sky-Ice/p/9289922.html 直接进入正题,把一个布尔值传递给子组件,然后,在子组件中修改该值,会报错 Avoid mutating a prop directly since the value will be overwri

Vue 组件&amp;组件之间的通信 之 子组件向父组件传值

子组件向父组件传值:子组件通过$.emit()方法以事件形式向父组件发送消息传值: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:父组件com-a要获取子组件data中的height属性: 在子组件com-b中,需要用$.emit()方法将数据以事件的形式发送,$.emit('sendData', data, data…),红色的部分事件名可自定义,数据可传递多个: 在父组件中使用子组件的地方 <com-b @自定义事件名='getD

Vue 子组件传父组件

vue中的传值是个很烦的问题,记录一下自己完成的这个需求. 首先,被引用的称之为子组件,当前页面为父组件,这个不能搞错. 子组件传值,要用到this.$emit. 子组件页面,需要在一个函数中使用this.$emit的方法来传. saves () { localStorage.setItem('note', this.note); this.h1 = localStorage.getItem('note'); console.log(this.h1) // this.conShow = true

vue--父组件向子组件传参--父组件定义v-bind:参数名--子组件接收props----子组件调用父组件的方法(子组件向父组件传参)父组件@事件名称--子组件接收this.$emit

<!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" con

Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据

<!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" con

2.Vue子组件给父组件通信

子组件给父组件通信 如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的 子组件: <template> <div @click='upData'></div> </template> <script type="text/javascript"> export default { data () { return { ms