vue 组件的简单学习

vue 的组件有两种注册方式：

1 全局注册：一次注册，多个地方都可以使用

2 局部注册： 用一次 注册一次

 

在vue中使用组件，首先你要有个创建个组件：

在你的这个文件夹下创建一个组件 例如：

<template>
    <div id="home">
        <li v-for="user in users">
            {{user}}
        </li>
    </div>
</template>


<script>
    export default {
        name:'home',
        data() {
            return {
                users:["23","we","sd"]
            };
        }
    }
</script>

<style>

</style>

 

上面代码是遍历展示，users这个数组；接下来我想要在多个地方展示

首先 在main.js中引入这个组件

import Home from './components/Home'

然后注册组件 例如：我注册一个组件名字叫home，调用刚刚引入的组件Home

Vue.component('home',Home);

这样就完成了注册。

接下来是使用：

在你想要使用的地方，例如在我的某个组件中 想要调用刚才注册的home组件

在代码中加入 <home></home>

<template>
  <div class="hello1">
 
    <home></home>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

 

以上就完成了全局注册，引用组件。