vue中 $emit，props的用法

忘是亡心i 2022-12-10 10:10 198阅读 0赞

# vue中 关于$emit，props的用法 #

1.  父组件使用 props 把数据传给子组件
2.  子组件使用 $emit 触发父组件的自定义事件

### 子组件：child.vue ###

<template>
      <div class="child">
        <h3>接收父组件传递过来的值：{ { sendData}}</h3> 
        <br/>
        <button @click='toParent'>点击将子组件内容传递给父组件</button>
      </div>
    </template>
    <script>
      export default { 
        props:['sendData'], 
        methods:{ 
          toParent() { 
            this.$emit('showData',"通过$emit传递给父组件");//toParent事件触发后，自动触发showData事件
          }
        }
      }
    </script>

### 父组件：parent.vue ###

<template>
        <div class="parent">
          <p>{ { childData}}</p>
          <Child @showData="updateData" :sendData="childData"></Child>
        </div>
    </template>
    <script>
      import Child from "./child";
      export default { 
        components: { Child},
        data(){ 
            return { 
                childData:"父组件传递给子组件的值"
            }
        },
        methods:{ 
          //通过触发子组件触发，修改父组件定义的值
          updateData(data){ 
           this.childData=data;
          }
        }
      }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUe 中SASS用法

[https://blog.csdn.net/wangningjing87/article/details/100918868][https_blog.csdn.net_wan

超、凢脫俗/ 2023年08月17日 17:04/ 0 赞/ 73 阅读

相关 Vue中$event的用法

因为在Vue API文档里$event的用法找不到，所以我自己总结了一下。通常的用法是用来获取当前元素的最新值。`$event.target.value` <bo

「爱情、让人受尽委屈。」/ 2023年07月03日 10:49/ 0 赞/ 71 阅读

相关 vue中prop的用法

prop的大小写 HTML 中的 `attribute` 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelC

骑猪看日落/ 2023年03月01日 09:04/ 0 赞/ 149 阅读

相关 vue中watch的用法

需求：输入框有内容时，按钮启用，没内容时按钮禁用 <el-input v-model="content"></el-input> <el-button :di

柔光的暖阳◎/ 2023年02月12日 06:25/ 0 赞/ 16 阅读

相关 VUE中watch用法

一、 watch是什么？监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值，用一个函数取代。简洁的说：watch的作用可以监控一个值的变换，

ゝ一世哀愁。/ 2023年02月09日 10:28/ 0 赞/ 6 阅读

相关 Vue中ref的用法

基本用法 <div id="app"> <input type="text" ref="input1"/> <button @click="add">添加

比眉伴天荒/ 2022年05月18日 05:00/ 0 赞/ 336 阅读

相关 Vue中watch用法

> 这里结合cmputed实现 > index.vue <script> export default{ data(){

叁歲伎倆/ 2022年01月12日 00:23/ 0 赞/ 311 阅读

相关 vue中$emit的用法

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实

野性酷女/ 2021年12月22日 05:51/ 0 赞/ 337 阅读

相关 vue 中用法

1.v-for和data属性 <li v-for="(item, index) in message" v-on:click="addClassFun(inde

我不是女神ヾ/ 2021年12月03日 15:07/ 0 赞/ 430 阅读

相关 vue中localstorage的用法

vue中需要将内容存储到本地缓存中 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

àì夳堔傛蜴生んèń/ 2021年07月26日 02:16/ 0 赞/ 710 阅读