vue学习-组件基础

1. 父子组件传值

父组件通过prop向子组件传递数据，HTML attribute 名不区分大小写，因此浏览器将所有大写字符解释为小写，所以这里的prop使用kebab-case命名法。

传递到子组件，因为不是html attr，可以正常使用camelCased命名法，比如子组件的：props: ["childName", "fontSize"], {{ childName }}

不过如果是单文件组件，是可以用camelCased命名法命名HTML attribute的

父组件监听子组件事件，@enlarge-size="enlargeSize(child, $event)"

同样是html attr的时候使用kebab-case命名

$event接受的是子组件传递过来的值（@click="$emit('enlargeSize', 16)"）这里为16

如果只有子组件的参数，可以简写为@enlarge-size="enlargeSize"，这样默认的一个参数就是子组件传递过来的值

<template>
  <child
    v-for="(child, index) of children"
    :key="index"
    :child-name="child.name"
    :font-size="child.size"
    @enlarge-size="enlargeSize(child, $event)"
  ></child>
</template>

components: {
  child,
},
data() {
  return {
    children: [
      { name: "a", size: 16 },
      { name: "b", size: 16 },
      { name: "c", size: 16 },
    ],
  };
},
methods: {
  enlargeSize(child, size) {
    child.size = size ? size : child.size + 1;
  },
},

<template>
  <div @click="$emit('enlargeSize')" :style="{ 'font-size': fontSize + 'px' }">
    childName: {{ childName }}
    <button @click="$emit('enlargeSize', 16)">重置</button>
  </div>
</template>

props: ["childName", "fontSize"],
emits: ["enlargeSize"],

---

2.组件上使用v-model

<input v-model="searchText" />
等价于
<input :value="searchText" @input="searchText = $event.target.value" />

<custom-input v-model="searchText"></custom-input>

v-model放组件中则是等价于

<custom-input
  :model-value="searchText"
  @update:model-value="searchText = $event"
></custom-input>

理解为父组件传递了个model-value的attr，接受一个update:model-value的事件

 所以为了让<custom-input v-model="searchText"></custom-input>生效，这个组件的input必须

• 将其 value attribute 绑定到一个名叫 modelValue 的 prop 上（:value="modelValue"）
• 在其 input 事件被触发时，将新的值通过自定义的 update:modelValue 事件抛出（@input="$emit('update:modelValue', $event.target.value)"）

app.component('custom-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    >
  `
}) 

 

也可以通过get set实现

app.component('custom-input', {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  template: `
    <input v-model="value">
  `,
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) { 
        this.$emit('update:modelValue', value)
      }
    }
  }
})

---

3.通过插槽分发内容

父组件写在子组件标签中间的内容会被插入的子组件<slot></slot>的位置

  <slot-child>
    <h3>插入的内容</h3>
  </slot-child>

<div>slot: <slot></slot></div>

---

4.动态组件

可以用is让组件改变。例如下面就是<h1>内容<h1>。也适用于自定义组件

<component :is="componentName">内容</component>

return {
  componentName: "h1",
};

 

当它用于原生 HTML 元素时，is 的值必须以 vue: 开头，才可以被解释为 Vue 组件。这是避免和原生自定义元素混淆。

<table>
  <tr is="vue:blog-post-row"></tr>
</table>