欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue 方法间传递数据对象参数

程序员文章站 2022-07-14 18:24:06
...
功能:将data对象作为参数传递给方法,在方法中对不同的参数进行相应操作。

如下,实现简单实现根据传入的不同p标签key对象,在相应p标签中显示相应内容:

<template>
  <div>
    <!-- 可以通过如下两种方式绑定标签内容 -->
    <p>{{map.p1Content}}</p>
    <p>{{map.p2Content}}</p>
    <p>{{map.p3Content}}</p>
    <p v-html="map.p4Content"></p>
  </div>
</template>

<script>
export default {
  name: 'TransferParam',
  data () {
    return {
      map: {
        p1Content: '',
        p2Content: '',
        p3Content: '',
        p4Content: '',
      },
    }
  },
  methods: {
    //   给对象赋值
    setPValue (contentKey, content) {
      this.map[contentKey] = content
    },
  },
  created () {
    //   调用方法
    this.setPValue('p1Content', "第一个p标签内容。")
    this.setPValue('p2Content', "第二个p标签内容。")
    this.setPValue('p3Content', "第三个p标签内容。")
    this.setPValue('p4Content', "第四个p标签内容。")
  }
}
</script>

效果图:
vue 方法间传递数据对象参数
代码:https://gitee.com/crazywsp/JavaImprove/blob/master/VueRepo/yarndemo03/src/components/TransferParam.vue