Vue 自定义组件

子组件中调用父组件方法

父组件

<MyComponent @callback="callbackFunc" />

export default {
  // ...
  methods: {
    callbackFunc(arg1, arg2) {
      // ...
    }
  }
}

子组件

// 在需要的地方使用 $emit 来调用就行
this.$emit('callback', arg1, arg2)

• 核心是使用 $emit 方法
• 注意：在父组件中通过 v-on (缩写为 @) 来监听事件时，不要传入参数（无论方法是否有参数）
• 当需要传参时，在子组件使用 $emit 时传参
• 参考：vue 子组件调用父组件的方法并传参

自定义组件示例

文本复制组件

<template>
  <el-text v-bind="$attrs" @mouseenter="mouseEnter" @mouseleave="mouseLeave" style="">
    <span v-if="isHidden">******</span>
    <span v-else-if="maxLen > 0 && $slots.default()[0].children.length > maxLen">{{ $slots.default()[0].children.slice(0, maxLen) }}...</span>
    <slot v-else />
    <el-icon v-if="show" v-copy="$slots.default()[0].children" @click="stop" style="margin-left: 3px; cursor: pointer;"><el-icon-copy-document /></el-icon>
  </el-text>
</template>

<script>
  export default {
    props: {
      isHidden: { type: Boolean, default: false },
      maxLen: {type: Number, default: 0},
    },
    data() {
      return {
        show: false,
      }
    },
    computed: {
    },
    mounted() {
      // console.log(this.$slots.default()[0])
    },
    methods: {
      mouseEnter() {
        this.show = true
      },
      mouseLeave() {
        this.show = false
      },
      stop(e) {
        e.preventDefault();
      }
    }
  }
</script>

<style scoped>
</style>

• 功能1鼠标移动到文本上时，在文本右侧显示复制图标；点击可复制文本
• 复制功能使用的是 SCUI 框架自带的复制指令
• 如果不是在 SCUI 框架的基础上，也可以自己写复制功能，代码可参考《点击复制到剪切板》
• 功能2密码字段可使用星号隐藏，不影响复制
• 功能3还可以指定文本展示的最长长度，超过长度使用省略号代替