Article directory
Component base
Referenced subcomponents:
<template>
<div>
<h3>组件</h3>
</div>
</template>
<script>
export default {
name: "mycomponent",
}
</script>
<!-- scoped:代表当前样式,只在当前组件中生效 -->
<style scoped>
h3{
color: rebeccapurple;
}
</style>
parent component:
<template>
<!-- 第三步:以标签的形式加载组件 -->
<mycomponent></mycomponent>
</template>
<script>
/* 第一步:导入组件 */
import mycomponent from './components/mycomponent.vue'
export default {
// 第二步:挂载组件
components: {
mycomponent
}
}
</script>
props [parent to child] (component data transfer)
parent component
<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>
Subassembly
<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>
The type of type:
- String string
- Number
- Boolean Boolean
- Array array
- Object object
- Date date
- Function function
- Symbol unique value
Custom event [from child to parent] (component data transfer)
parent component
<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>
Subassembly
<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>