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 文件夹下。