Vue 组件

1、创建组件

单文件组件是 Vue 组件的推荐方式，使用 .vue 文件格式来定义组件的模板、脚本和样式。

<!-- HelloWorld.vue -->
<template>
  <div class="hello">
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    message: String
  }
}
</script>

<style scoped>
.hello {
  color: blue;
}
</style>

1）全局注册组件

在 main.js 文件中，可以全局注册组件：

import Vue from 'vue';
import App from './App.vue';
import HelloWorld from './components/HelloWorld.vue';

Vue.component('HelloWorld', HelloWorld);

new Vue({
  render: h => h(App),
}).$mount('#app');

2）局部注册组件

<template>
  <div id="app">
    <HelloWorld message="Hello Vue!"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

2、组件的属性（Props）

Props 是父组件传递给子组件的数据。子组件通过 props 选项声明它们期望接收的 prop。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

父组件使用该子组件时传递 message prop：

<template>
  <div>
    <ChildComponent message="Hello from parent"/>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  }
}
</script>

3、组件的事件（Events）

子组件可以通过 $emit 方法向父组件发送事件，父组件可以监听这些事件。

1）子组件

<template>
  <button @click="sendMessage">Click me</button>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child');
    }
  }
}
</script>

2）父组件

<template>
  <div>
    <ChildComponent @message-sent="handleMessage"/>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
}
</script>

4、插槽（Slots）

插槽可以在子组件模板中插入内容。

1）默认插槽

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

使用子组件时，可以在组件标签中嵌入内容：

<template>
  <div>
    <ChildComponent>
      <p>This is some slot content</p>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  }
}
</script>

2）具名插槽

<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

使用具名插槽：

<template>
  <div>
    <ChildComponent>
      <template v-slot:header>
        <h1>This is the header</h1>
      </template>
      <p>This is some default slot content</p>
      <template v-slot:footer>
        <p>This is the footer</p>
      </template>
    </ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  }
}
</script>

5、动态组件

Vue 提供了 component 组件，可以动态地在多个组件之间进行切换：

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  name: 'DynamicComponent',
  data() {
    return {
      currentComponent: 'ComponentA'
    }
  },
  components: {
    ComponentA,
    ComponentB
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  }
}
</script>

6、异步组件

Vue 可以定义返回一个 Promise 的工厂函数，来按需加载组件：

const AsyncComponent = () => ({
  component: import('./AsyncComponent.vue'),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 200,
  timeout: 3000
});

export default {
  components: {
    AsyncComponent
  }
}