Vue 自定义组件

Vue 自定义组件与使用

1. 初识组件

  组件：如果项目中多次用到类似的效果，就可以把这个效果进行自定义组件。新建项目后默认存在 HelloWorld.vue 就是一个组件，组件必须导入之后才能使用，其中 HelloWorld 为自定义名称，通过这个名称就可以调用对应组件。

  components：组件文件只导入是不能被调用的，还必须在 components 中注册组件，注册后在 <template> 中就可以通过组件名直接引用组件了。在 <template> 中组件以标签形式存在，标签名为组件名。其中 msg 是在 HelloWorld 中定义的 props 参数，表示需要传递给组件的数据。

定义组件 HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String  //给组件传递的参数类型
  }
}
</script>

2. 自定义组件

1、在 src/components 目录下新建一个名称为 MyComponent.vue 的组件；

2、编写组件的内容；

<template>
    <div>
        <div>这是一个自定义组件</div>
        <div>{{msg}}</div>
    </div>
</template>

<script>
    export default {
        name: "MyComponent",
        props: {
            msg: String
        }
    }
</script>

<style scoped>

</style>

其中，props 定义组件传递的参数名称和参数类型，{{msg}} 则获取组件接收到的参数值。

3、修改 App.vue，使用自定义组件；

首先通过 import 导入组件并设置名称为 MyComponent，然后在 components 中声明或注册组件，最后传递必要的参数，使用组件 <MyComponent></MyComponent> 。

<template>
    <div id="app">
        <!--3.传递参数，使用组件-->
       <MyComponent msg="你好!欢迎来到我的Vue App."></MyComponent>
    </div>
</template>

<script>
    // 1.导入组件
    import MyComponent from "./components/MyComponent"
    export default {
        name: 'App',
        components: {
            //2.声明或注册组件
            MyComponent
        }
    }
</script>

3. 组件参数传递

组件传递参数的类型：String、Number、Boolean、Array 和 Object 等。当传递数值类型时，必须使用 v-bind 指令进行设置，此时的参数表示一个表达式而不是一个字符串。

3.1 定义参数

<template>
    <div>
        <div>大家好!我的名字是{{name}},年龄为{{age}}岁.</div>
        <div>学号：{{stu.No}}</div>
        <div>学校：{{stu.schoolName}}</div>
        <div>专业：{{stu.majorName}}</div>
    </div>
</template>

<script>
    export default {
        name: "MyComponent",
        props: {
            name: String,
            age: Number,
            stu: Object
        }
    }
</script>

<style scoped>

</style>

3.2 接收参数并绑定

<template>
    <div id="app">
        <!--3.传递参数(字符串、数字、对象)，使用组件-->
       <MyComponent name="张三" v-bind:age="15" v-bind:stu="school"></MyComponent>
    </div>
</template>

<script>
    // 1.导入组件
    import MyComponent from "./components/MyComponent"
    export default {
        name: 'App',
        components: {
            //2.声明或注册组件
            MyComponent
        },
        data(){
            return{
                school:{
                    No: 123123,
                    schoolName: "湖北大学",
                    majorName: "软件工程"
                }
            }
        }
    }
</script>

注：如果直接使用 age=15 进行传参效果依然可以实现，但是会在浏览器出现错误，提示要一个 15 的参数值，但是发现传递的是”15”。所以在向组件传递除 String 以外的类型时，都通过 v-bind 进行参数的绑定。

组件和页面的区别：

组件和页面文件中内容是完全相同的，唯一的区别是组件可能被多次使用，import 时会给组件定义个名称，而页面文件可能只使用一次，import 时就不需要定义名称。在项目中为了区分页面和组件，把组件放在 components 文件夹下，而页面则放在 pages 或 views 文件夹下。