一、组件的创建
在 components 文件夹下新建一个组件 runoob.vue
<template> <div>自定义组件</div> </template> <script> export default { data () { return { } } } </script>
二、组件的引用
1、通过 import 导入组件 runoob.vue
import runoob from '@/components/runoob.vue'
2、在 components 下注册该组件
components: {
runoob
}
3、在标签中引用
<runoob></runoob>
完整示例:
<template> <div id="app"> <runoob></runoob> </div> </template> <script> import runoob from '@/components/runoob.vue' export default { data () { return { } }, components: { runoob } } </script>
运行结果:
三、组件的自定义属性
1、Prop 传属性值
prop 是父组件用来传递数据的一个自定义属性(通过 props 把数据传给子组件)
components/runoob.vue 文件:
<template> <div :style="{ color: col }">自定义组件</div> <!-- 将接收到的数据应用到标签属性中 --> </template> <script> export default { data () { return { } }, props: { col: { type: String, default: '#000' } } // 接收传过来的数据 } </script>
views/demo.vue 文件:
<template> <div id="app"> <runoob col="red"></runoob> <!-- 在标签中自定义属性值作为要传过去的数据 --> </div> </template> <script> import runoob from '@/components/runoob.vue' export default { data () { return { } }, components: { runoob } } </script>
运行效果:
2、Prop 验证属性值
props: { col: { type: String, default: '#000' } }
这里的 type 可以是下面原生构造器:
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
当 Prop 验证失败时,Vue(基于开发环境构建版本)会产生一个控制台的警告
四、组件的自定义事件
父组件使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件
1、$emit(eventName) 触发事件
components/runoob.vue 文件:
<template> <div :style="{ color: col }" @click="doWhat">自定义组件</div> <!-- 将传进来的数据应用到标签中 --> <!-- 绑定点击事件doWhat --> </template> <script> export default { data () { return { } }, methods: { doWhat () { this.$emit('myMethod') } }, // doWhat触发myMethod事件 props: { col: { type: String, default: '#000' } } // 接收传进来的数据 } </script>
views/demo.vue 文件:
<template> <div id="app"> <runoob col="red" @myMethod="sayHello"></runoob> <!-- 在标签中自定义属性值作为要传过去的数据 --> </div> </template> <script> import runoob from '@/components/runoob.vue' export default { data () { return { } }, methods: { sayHello () { alert('Hello!') } }, // 触发myMethod事件就会调用sayHello components: { runoob } } </script>
运行效果: