Vue全局组件

Posted 2021-04-16 Rabbit

使用cli提供的脚手架创建一个项目。

1、在 src 目录下新建一个目录，名为 components 。在 components 目录下，创建一个组件，这里我创建的组件名为：Home.vue

2、编写 Home.vue 组件的内容。

<template>    <!-- 注意，每个组件还能有个根元素。 --> <div> <p>Name: {{name}}</p> <hr> <button @click="changeName">Change Name</button> </div></template>
<script>export default { data() { return { name: 'Rabbit' } }, methods: { changeName() { this.name = 'Rabbit_svip'; } }}</script>

值得注意的是，每个组件只能有一个根元素。

3、在 main.js 中，引入 Home.vue 并注册。

import Vue from 'vue'import App from './App.vue'import Home from './components/Home.vue' // 引入Home.vue
Vue.component('app-rabbit', Home); // 注册一个全局组件Vue.config.productionTip = falsenew Vue({ render: h => h(App),}).$mount('#app')

上面的代码，第3行是引入 Home.vue 组件，第5行是全局注册。可以说，通常在 main.js 里注册的组件都是全局组件。

这里，把组件命名为 app-rabbit

4、在 App.vue 中使用。

<template> <div id="app">    <!-- 使用组件 -->    <app-rabbit /> </div></template>

最后贴个图吧