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>

 

 

以上就完成了全局註冊，引用組件。