Vue 关于组件（一）

在Vue中,组件:小型的，一个个独立，可以复用的UI模块。它有三大概念：属性、事件、插槽

属性

• 自定义属性props
  • 组件props中声明的属性
• 原生属性attrs
  • 没有生命的属性，默认自动挂载到组件根元素上
  • 设置inheritAttrs 为false可以关闭自动挂载
• 特殊属性 class、style
  • 挂载到组件根元素上
  • 支持字符串、对象、数组等多种语法

<template>
  <div>
    name: {{ name }}
    <br />
    type: {{ type }}
    <br />
    list: {{ list }}
    <br />
    isVisible: {{ isVisible }}
    <br />
    <button @click="handleClick">change type</button>
  </div>
</template>

<script>
export default {
  name: "PropsDemo",
  // inheritAttrs: false,
  // props: ['name', 'type', 'list', 'isVisible'],
  props: {
    name: String,
    type: {
      validator: function(value) {
        // 这个值必须匹配下列字符串中的一个
        return ["success", "warning", "danger"].includes(value);
      }
    },
    list: {
      type: Array,
      // 对象或数组默认值必须从一个工厂函数获取
      default: () => []
    },
    isVisible: {
      type: Boolean,
      default: false
    },
    onChange: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    handleClick() {
      // 不要这么做、不要这么做、不要这么做
      // this.type = "warning";
      // 可以，还可以更好
      this.onChange(this.type === "success" ? "warning" : "success");
    }
  }
};
</script>

事件

• 普通时间

  • @click,@input,@change,@xxx等事件
  • 通过this.$emit('xxx',...)触发

• 修饰符事件

  • @input.trim,@click.stop,@submit.prevent 等
  • 一般用于原生html元素，自定义组件需要自行开发支持

<template>
  <div>
    name: {{ name || "--" }}
    <br />
    <input :value="name" @change="handleChange" />
    <br />
    <br />
    <div @click="handleDivClick">
      <button @click="handleClick">重置成功</button>&nbsp;&nbsp;&nbsp;
      <button @click.stop="handleClick">重置失败</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "EventDemo",
  props: {
    name: String
  },
  methods: {
    handleChange(e) {
      this.$emit("change", e.target.value);
    },
    handleDivClick() {
      this.$emit("change", "");
    },
    handleClick(e) {
      // 都会失败
      //e.stopPropagation();
    }
  }
};
</script>

插槽

• 普通插槽
  • <template slot="xxx">...</template>
  • <template v-slot:xxx>...</template>

• 作用域插槽
  • <template slot="xxx" slot-scope="props">...</template>
  • <template v-slot:xxx="props">...</template>

<template>
  <div>
    <slot />
    <slot name="title" />
    <slot name="item" v-bind="{ value: 'vue' }" />
  </div>
</template>

<script>
export default {
  name: "SlotDemo"
};
</script>

我们可以理解为万物皆“属性”，即它们都是父组件传递给子组件，然后子组件根据传递的内容来执行对应的行为。请看demo

<template>
  <div>
    {{ name }}
    <br />
    <button @click="handleChange">change name</button>
    <br />
    <!-- {{ slotDefault }} -->
    <VNodes :vnodes="slotDefault" />
    <br />
    <VNodes :vnodes="slotTitle" />
    <br />
    <VNodes :vnodes="slotScopeItem({ value: 'vue' })" />
  </div>
</template>

<script>
export default {
  name: "BigProps",
  components: {
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  props: {
    name: String,
    onChange: {
      type: Function,
      default: () => {}
    },
    slotDefault: Array,
    slotTitle: Array,
    slotScopeItem: {
      type: Function,
      default: () => {}
    }
  },
  methods: {
    handleChange() {
      this.onChange("Hello vue!");
    }
  }
};
</script>

懵懵懂懂，先做个记录，后面需要勤练习，加深里面......

组件基础

组件注册

Prop

----end---