引用组件

1.新建组件

在components文件夹下新建Users.vue组件,Usres.vue结构如下

<template>
    <div class="users">
        <ul>
            <li v-for="item in users">{{item}}</li>
        </ul>
    </div>
</template>
<script>
    export default {
        name:'users',
        props:{
            users:{
                type:Array,
                required:true
            }
        },
        data() {
            return {
                users:['x','y','z'],
            };
        }
    }
</script>
<style scoped=""></style>

2.引用

在App.vue中引入组件Users.vue

import Users from "@/components/Users.vue";

3.注册

在在App.vue中注册组件

export default {
  name: "App",
  data: function() {
    return {    
  },
  //注册组件
  components: {
    Users,
  }
};

4.使用

<template>
  <div id="app">
        <Users></Users>
  </div>
</template>

数据传递

上面例子中App.vue组件中数据如何传递到Users.vue组件中使用呢

1.将Users.vue中data数据users数组放入App.vue中

2.在<Users></Users>上绑定数据

<Users :users="users"></Users>

3.在Users.vue中接收并使用

<template>
    <div class="users">
        <ul>
            <li v-for="item in users">{{item}}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        name:'users',
        props:{
            users:{
                type:Array,
                required:true
            }
        },
        data() {
            return {
            };
        }
    }
</script>

<style scoped="">
    
</style>