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>

View Code

 

上面代码是遍历展现，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>

 

 

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