关于在一个Vue中方法的相互调用、组件调用

2018-10-24  本文已影响0人  都江堰古巨基

今天在Vue中遇到了方法相互调用的坑,特此来备注一下:

// 一个用Vue-cli搭建的工程:
export default {
  name:"xxx",
  data(){
    ......
  }
  methods:{
    methodA(xxx){
      ......
    },
    methodB(){
      ......
      # 在B中调用A:
      this.methodA(xxx)
    },
  }
}

在Vue中(vue-cli)使用一个自己写的组件在另一个.vue文件中的办法:

// SoFaButton .vue:
<template>
    <span id="mybutton">
        <el-button type="primary" size="mini">
            <a v-bind:href="myUrl">{{myMessage}}</a>
        </el-button>
    </span>
</template>

<script>
    export default{
        name:"mybutton",
        props:['myUrl','myMessage']
    }
</script>

<style scoped>
    button > span > a {
        text-decoration: none;
        font-family: "PingFang SC";
        color: #ffff
    }
</style>

// 调用:
// <template>中:

<SoFaButton 
  myUrl="/manager"
  myMessage="点我查看未添加站点">    
</SoFaButton>

#<script>中:
import SoFaButton from '@/components/SoFaButton'

components: {
  SoFaButton,
 },
上一篇下一篇

猜你喜欢

热点阅读