通用技术 VUE 子父组件传值 (测试平台首页,一周时间,终于有点样子了)

zailushang · 2020年07月03日 · 最后由 zailushang 回复于 2020年07月09日 · 51 次阅读

为啥这点东西需要一周时间:
1、首先是水平一般,能力有限,前后端都是半吊子,再加上最近有点松劲了;
2、由于前期规划问题,在做质量统计的时候,需要做大量的数据整理、统计工作。
3、将前端的 Echart 做成传参的组件,后期直接调用,减少大量的重复代码;
4、主要是 @ 俊哥说的那句话,哪有条件找前端做啊,都是自己搞;

附加一段 VUE 子父组件传送数据的 demo:

父组件向子组件传值

父组件:

<template>
  <div>
    父组件:
    <input type="text" v-model="name">
    <!-- 引入子组件 -->
    <child :inputName="name"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

子组件

<template>
  <div>
    子组件:
    <span>{{inputName}}</span>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props: {
      inputName: String,
      required: true
    }
  }
</script>

子组件向父组件传值

参考:Vue2.0 子父组件通信

1、子组件:

(1)触发传值方法操作:

(2)传值方法:

selectApk(selection, row) {
    this.selected_apk.name = row['name'];
    this.selected_apk.size = row['size'];
    this.selected_apk.path = row['response'];
    console.log("传递给父组件");
    this.$emit('listenToSelectedApk',this.selected_apk)
}

2、父组件

(1)监听子组件,并触发父组件方法

<upload_apk ref="upload_apk" v-on:listenToSelectedApk="listenToUploadApk"></upload_apk>

(2)父组件方法

listenToSelectedApk(data) {
    console.log("[][][]----------------------------------");
    console.log(data);  //data即为子组件传递的参数
    return this.selected_apk
}
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 8 条回复 时间 点赞

sync 修饰符了解下,使用起来比你这个示例简洁一点
https://www.jianshu.com/p/6b062af8cf01

小酷 回复

看介绍,sync 也是用于父组件向子组件传参,我文中是直接通过子组件 props 传参。

父组件直接传就行:

子组件 props 接收参数:

没有明白 sync 的简洁用处,能帮忙说明一下吗?

zailushang 回复

props 是父组件向子组件传参(你这个子组件只绑定了 pieData 参数吧);sync 是子组件向父组件传参,就是个语法糖的用法,本质上跟 v-on 是一样的,只不过不用自己写。

小酷 回复

哦哦,明白了,谢谢,这样是方便很多

我也写了一个,同事没用,因为风格不匹配大平台。

行动力杠杠的👍

陈子昂 回复

为啥不匹配大平台啊?

simple 回复

惭愧,都是小活儿

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册