组件基础
被引用的子组件：
<template>
<div>
<h3>组件</h3>
</div>
</template>
<script>
export default {
name: "mycomponent",
}
</script>
<!-- scoped:代表当前样式，只在当前组件中生效 -->
<style scoped>
h3{
color: rebeccapurple;
}
</style>
父组件：
<template>
<!-- 第三步：以标签的形式加载组件 -->
<mycomponent></mycomponent>
</template>
<script>
/* 第一步：导入组件 */
import mycomponent from './components/mycomponent.vue'
export default {
// 第二步：挂载组件
components: {
mycomponent
}
}
</script>
props【父传子】（组件数据传递）
父组件
<template>
<!-- 第一步：动态数据传递 -->
<mycomponent :title="title" :names="names"></mycomponent>
</template>
<script>
import mycomponent from './components/mycomponent.vue'
export default {
data() {
return{
title:"标题",
names:["11","22"]
}
},
components: {
mycomponent
}
}
</script>
子组件
<template>
<div>
<!-- 第三步：直接引用 -->
<h3>{
{
title}}</h3>
<ul>
<li v-for="(item,index) in names" :key="index">{
{
item}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "mycomponent",
//第二步：接收值
props:{
title:{
type:String,
default:""
},
//数组和对象必须以函数形式返回
names:{
type:Array,
default:function(){
return []
}
}
}
}
</script>
type的类型：
- String 字符串
- Number 数字
- Boolean 布尔
- Array 数组
- Object 对象
- Date 日期
- Function 函数
- Symbol 独一无二的值
自定义事件【子传父】（组件数据传递）
父组件
<template>
<!-- 自定义的事件名称为（参数1），自定义方法不加括号 -->
<mycomponent @onEvent="getData"></mycomponent>
</template>
<script>
import mycomponent from './components/mycomponent.vue'
export default {
methods:{
// 自定义带data方法来获取传值
getData(data){
console.log(data)
}
},
components: {
mycomponent
}
}
</script>
子组件
<template>
<div>
<!-- 引用方法 -->
<button @click="senddata()">传递</button>
</div>
</template>
<script>
export default {
name: "mycomponent",
data() {
return {
title: "标题",
}
},
methods:{
// 在方法里面传参
senddata(){
//参数1：字符串（理论上是随意的，但是需要有意义【因为会被父组件引用】）
//参数2：传递的参数
this.$emit("onEvent",this.title)
}
}
}
</script>
<!-- scoped:代表当前样式，只在当前组件中生效 -->
<style scoped>
h3 {
color: rebeccapurple;
}
</style>