Vue自定义组件
一、组件的创建
在 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>
运行效果：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-07-31 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录