Vue——自定义组件 & 自定义事件$emit & 插槽slot

Posted 2023-05-03

参考技术A

局部注册的组件，只能在当前Vue实例中使用，并且在其子组件中不可用。
在 components 选项中定义局部组件。每个组件就是一个小型的Vue实例，它里面除了不能设置el选项，其他选项它都有。
组件名称： 自定义，可以使用驼峰命名方式或者短横线的命名方式，但是需要注意的是如果应用到DOM中，就只能用短横线命名的方式，否则就会报错。注意组件的名称不要跟原生html元素重名。
template选项： 定义组件的模板。模板中必须包含一个根标签。
props选项： 定义组件标签上的属性。驼峰命名法的 prop 名（postTitle）需要使用其等价的短横线分隔命名法（post-title）命名。注意：props是只读的，不能修改（ 解决办法： 在data中对props接收到的数据进行中转）。

data： 定义组件的数据。注意：Vue实例的data选项可以是一个对象，也可以是一个方法，由该方法返回一个对象。 但是在组件中，data选项必须是一个方法，由该方法返回一个对象。因为组件可能会使用很多次，如果data选项是对象的话，会导致多个组件使用了同一份数据。

全局注册的组件可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。
使用 Vue.component 来创建全局组件。Vue.component的第一个参数就是组件名。

$emit()用于触发自定义事件。注意：事件名称中不能采用大写字母。

效果：

效果：

slot 用于在组件的内部定义插槽，组件标签之间的所有html内容，会在插槽所在位置呈现。

效果：

Vue：从自定义组件派生的自定义组件中的 v-model 和输入事件

【中文标题】Vue：从自定义组件派生的自定义组件中的 v-model 和输入事件

【英文标题】：Vue: v-model and input event in custom component derived of a custom component

【发布时间】：2018-10-03 23:51:09

【问题描述】：

我有一个自定义输入，我在其中接收一个值道具并在输入事件上发出一个输入事件。我可以毫无问题地使用此自定义输入与模型，现在我正在创建一个自定义密码输入，我将其初始化为自定义输入，但我无法使用值和输入事件处理程序绑定模型（将它们传递给自定义输入） .我该如何处理？

自定义输入：

我的程序模型 > 自定义输入（值和输入事件处理程序）：有效 我的程序模型 > 自定义密码（值和输入事件处理程序）> 自定义输入：

不起作用

。

代码：

Input.vue：

<template>
    <div class="form-group">

      <label for="" v-if="typeof label !== 'undefined'"> label </label>

      <!-- GROUP  -->
      <template v-if="isGroup">
        <div class="input-group">
          <!-- PREPEND  -->
          <div v-if="hasPrepend" class="input-group-prepend"
              :class="'inside bg-transparent' : prependInside, 'pointer': prependPointer"
              @click="clickPrepend">

            <span class="input-group-text"
                  :class="'bg-transparent' : prependInside">

              <i  aria-hidden="true"
                  v-if="prependType === 'icon'"
                  :class="'fa fa-' + prependContent"></i>

              <template v-if="prependType === 'text'"> prependContent </template>
            </span>

          </div>

          <!-- INPUT  -->
          <input  class="form-control"
              :type="type"
              :class="generatedInputClass"
              :readonly="readonly"
              :disabled="disabled"
              :value="value"
              @input="inputEvent"
              @change="onChange">

          <!-- APPEND  -->
          <div v-if="hasAppend" class="input-group-append"
              :class="'inside bg-transparent' : appendInside, 'pointer': appendPointer"
              @click="clickAppend">

            <span class="input-group-text"
                  :class="'bg-transparent' : appendInside">

              <i  aria-hidden="true"
                  v-if="appendType === 'icon'"
                  :class="'fa fa-' + appendContent"></i>

              <template v-if="appendType === 'text'"> appendContent </template>

            </span>

          </div>
      </div>
      </template>

      <!-- INPUT  -->
      <template v-else>
        <input  class="form-control"
              :type="type"
              :class="generatedInputClass"
              :readonly="readonly"
              :disabled="disabled"
              :value="value"

              @input="inputEvent"
              @change="onChange"
              >
      </template>

      <small  class="form-text"
              v-if="typeof helpText !== 'undefined'"
              :class="generatedHelperClass">
         helpText 
      </small>

    </div>
</template>

<script>
export default 
  name: 'InputGroup',
  props: 
    value: String,
    label: String,
    helpText: String,
    size: String,
    prependContent: String,
    appendContent: String,
    prependType: 
      type: String,
      default: 'icon',
    ,
    appendType: 
      type: String,
      default: 'icon',
    ,
    prependInside: 
      type: Boolean,
      default: false,
    ,
    appendInside: 
      type: Boolean,
      default: false,
    ,
    prependPointer: 
      type: Boolean,
      default: false,
    ,
    appendPointer: 
      type: Boolean,
      default: false,
    ,
    readonly: 
      type: Boolean,
      default: false,
    ,
    disabled: 
      type: Boolean,
      default: false,
    ,
    type: 
      type: String,
      default: 'text',
    ,
    valid: 
      type: Boolean,
      default: null,
    ,
  ,
  watch: 
    valid() 

    ,
  ,
  computed: 
    isGroup() 
      return this.hasPrepend || this.hasAppend;
    ,
    hasPrepend() 
      return typeof this.prependContent !== 'undefined';
    ,
    hasAppend() 
      return typeof this.appendContent !== 'undefined';
    ,
    generatedInputClass() 
      const size = typeof this.size !== 'undefined' ? `form-control-$this.size` : '';
      let valid = '';
      if (this.valid !== null) 
        valid = this.valid ? 'is-valid' : 'is-invalid';
      
      return `$size $valid`;
    ,
    generatedHelperClass() 
      let valid = 'text-muted';
      if (this.valid !== null) 
        valid = this.valid ? 'valid-feedback' : 'invalid-feedback';
      
      return `$valid`;
    ,
  ,
  methods: 
    inputEvent(e) 
      this.$emit('input', e.target.value);
    ,
    clickPrepend(e) 
      this.$emit('click-prepend', e);
    ,
    clickAppend(e) 
      this.$emit('click-append', e);
    ,
    onChange(e) 
      this.$emit('change', this.value, e);
    ,
  ,
;
</script>

Password.vue：

<template>
<div>

  <app-input
              :label="label"
              :type="type"
              prepend-content="lock"
              :append-content="passwordIcon"
              :append-inside="true"
              :append-pointer="true"
              @click-append="tooglePassword"
              :value="value"
              @input="inputEvent">
  </app-input>
</div>
</template>

<script>
import Input from './Input';

export default 
  name: 'Password',
  components: 
    appInput: Input,
  ,
  props: 
    value: String,
    label: 
      type: String,
      default: 'Contraseña',
    ,
    readonly: 
      type: Boolean,
      default: false,
    ,
    disabled: 
      type: Boolean,
      default: false,
    ,
    valid: 
      type: Boolean,
      default: null,
    ,
  ,
  data() 
    return 
      pass: '',
      type: 'password',
    ;
  ,
  computed: 
    passwordIcon() 
      return this.type === 'password' ? 'eye' : 'eye-slash';
    ,
  ,
  methods: 
    tooglePassword() 
      this.type = this.type === 'password' ? 'text' : 'password';
    ,
    inputEvent(e) 
      this.$emit('input', e.target.value);
    ,
  ,
;
</script>

【参考方案1】：

问题是你的Password 监听app-input 组件的input 事件，它的值实际字符串值已经，而不是元素（你必须调用@ 987654325@获取字符串值）

换句话说，在 Password.vue 中，而不是：

inputEvent(e) 
  this.$emit('input', e.target.value);
,

做：

inputEvent(e) 
  this.$emit('input', e);
,

CodeSandbox demo here.

【讨论】：

谢谢，现在我在 1 小时后弄明白了，但谢谢 :)