vue如何向被其引用的js文件中传入参数

becoder
  • 1
新手上路,请多包涵

问题描述

比如有一个vue文件 A.vue,引用了一个B.js
A.vue

<template>
</template>
<script>
import DSapp from './B.js'
</script>
<style>
</style>

B.js

var DSapp=function(){
}

export default DSapp

A.vue 如何向B.js传递参数
常见的传值方式介绍都是vue和vue传,vue传js的很少。

回复
阅读 427
4 个回答

调用的时候传参即可。
A.vue

<template>
</template>
<script>
import DSapp from './B.js'

export default {
  data () {
    return {

    }
  },
  created() {
    DSapp('xiaomin')
  }
}
</script>
<style>
</style>

B.js

var DSapp=function(name){
  console.log('hello ', name);
}

export default DSapp

已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。
其实在Vue文件向JS文件传参,不过就是一个传统的JS传参方法,在JS文件内,抛出一个funciton,然后在Vue文件内,引入这个 function ,然后调用对应的function 进行传参即可实现
  • 新建Vue文件 - a.vue

    <script>
    // 引入具体的function形式
    import {getDataInfo} from "./b.js";
    // 引入整个b.js内的抛出
    import * as b from "b.js";
    export default{
    methods:{
      sendDataInfo(){
       const data = '需要传递到b.js的数据内容'
       // 调用方式一
       getDataInfo(data);
       // 调用方式二
       b.getDataInfo(data);
       // 如果需要接收返回值
       const result = getDataInfo(data);
       const result = b.getDataInfo(data);
      }
    }
    }
    </script>
  • 新建JS文件 - b.js

    export const getDataInfo = (params)=>{
     // 接收到的参数
     console.log(params);
     // 如果需要抛出处理后的
     return params;
    }

正常声明一个可传参数的 function 然后导出,在 vue 项目中,import 或者 require 之后,当成平时使用的函数使用就好了。

// getType.js
function getType(userInfo){
  return userInfo.type
}
export default getType
<!-- app.vue -->
<template>
  <div id="app">
    <span>{{ getType(user) }}</span><!-- 在 template 中直接使用 -->
    <span>{{ userTypeInComputed}}</span><!-- 通过 computed 计算使用 -->
  </div>
</template>
<script>
import getType from './getType.js'
export default {
  data () {
    return {
      user:{
        nickname:'张三',
        type:'guest',
        frozen:false,
        locale: 'CN-zh'
      },
      userTypeInMethods:""
    }
  },
  computed:{
     // 方式2: 在computed中使用
     userTypeInComputed(){
       return getType(this.user)
     }
  },
  created(){
    this.setUserType()
  },
  methods:{
    getType, // 如果你想直接在 template 中使用,直接放入 methods 中即可当成自己声明的方法来使用了。
    // 在 methods 中使用 import 进来的函数并传入参数,并修改 userTypeInMethods 变量
    setUserType(){
       this.userTypeInMethods = getType(this.user)
    }
  }
}
</script>
<style>
#app {
  height: 100%;
  min-width: 1024px;
}
</style>

如果还有疑问,可以在评论中追问。


已参与了 SegmentFault 思否「问答」打卡,欢迎正在阅读的你也加入。
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏