vue中组件通讯--子到父

客官°小女子只卖身不卖艺 2021-12-23 03:21 234阅读 0赞

#### 步骤： ####

*  父组件提供一个方法
 *  这个方法是子组件调用的，数据通过方法的参数拿到
 *  将这个方法传递给子组件
 *  由子组件触发这个方法，将要传递的数据作为方法的参数传递

<div id="app">
        <h1>{
        { age }}</h1>
    
        
        <child @getmsg="getChildMsg"></child>
      </div>
    
      <script src="./vue.js"></script>
      <script>
        // 子到父：
        // 子组件：child组件
        // 父组件：vm实例
    
        const vm = new Vue({
          el: '#app',
          data: {
            age: 0
          },
          // 1 准备一个方法
          methods: {
            getChildMsg(data) {
              console.log('接受到子组件传递过来的数据为：', data)
              this.age = data
            }
          },
          components: {
            child: {
              template: `
                <div>
                  <button @click="fn">传递数据给父组件</button>
                </div>
              `,
              methods: {
                fn() {
                  // 3 触发父组件中传递过来的方法
                  this.$emit('getmsg', 19)
                }
              }
            }
          }
        })
      </script>

转载于:https://www.cnblogs.com/mushitianya/p/10523016.html

发表评论取消回复

表情：

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

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

相关阅读

相关 VUE —— 6、父组件传参到子组件、父组件操作子组件、子组件操作父组件($emit)、兄弟组件传参

目录（10）组件 1.父组件传参到子组件（1）方式一：数组接收（2）方式二：数组对象接收（3）方式三：对象接收（推荐）（4）传入不同的名称（5）

比眉伴天荒/ 2023年01月24日 03:27/ 0 赞/ 161 阅读

相关 VUE_Vue父组件调用子组件方法,uni-app父组件调用子组件方法

//父组件 <template> <div class="home"> <HelloWorld ref="mychild"></He

ゞ浴缸里的玫瑰/ 2022年12月16日 06:15/ 0 赞/ 298 阅读

相关 VUE_vue子组件调用父组件方法，uni-app子组件调用父组件方法

父组件引入组件header <Header @call="call" /> 父组件methods添加方法 call(){ conso

比眉伴天荒/ 2022年12月11日 03:23/ 0 赞/ 260 阅读

相关 Vue $parent、子组件调用父组件方法，父组件调用子组件方法

[https://blog.csdn.net/zgrkaka/article/details/100528714][https_blog.csdn.net_zgrkaka_ar

超、凢脫俗/ 2022年10月06日 01:50/ 0 赞/ 282 阅读

相关子组件传递数据到父组件(vue.js)

父组件: app.vue <template> <div id="app"> <img src="./assets/logo.png">

青旅半醒/ 2022年06月13日 11:59/ 0 赞/ 290 阅读

相关 vue 父组件调用子组件的方法，子组件调用父组件方法

首先看代码： 1、父组件： <template> <div> <div v-if="!userShow"> 父组件内容区

╰+攻爆jí腚メ/ 2022年04月17日 04:55/ 0 赞/ 558 阅读

相关 vue中组件通讯--子到父

步骤：父组件提供一个方法这个方法是子组件调用的，数据通过方法的参数拿到将这个方法传递给子组件由子组件触发这个方法，将要传递的数据作为方法的

客官°小女子只卖身不卖艺/ 2021年12月23日 03:21/ 0 赞/ 235 阅读

相关 vue 父组件调用子组件

1、在父组件里引用自组件 <generate-report @closeAddReport="closeAddReport" ref="addreport"><

谁借莪１个温暖的怀抱￠/ 2021年11月17日 09:02/ 0 赞/ 447 阅读

相关 Vue父组件获取子组件中的变量

在vue项目日常开发中，难免要把功能性组件抽离出来，这样结构就会出现父子组价，兄弟组件等，但是这样就会涉及到不同组件需要互相使用其中的值得问题。之前有说过通过ref来让父组

叁歲伎倆/ 2021年09月18日 13:44/ 0 赞/ 507 阅读

相关 vue中父组件调用子组件的方法

用$ref调用直接代码：子组件： <template> <div> </div> </templa

╰半夏微凉°/ 2021年09月15日 06:16/ 0 赞/ 387 阅读