1.父组件向子组件传值
props中定义子组件接收参数
title、contain定义类型以及默认值
//子组件child
<template>
<div class="child-contain">
<div>{{msg}}</div>
<div>{{title}}</div>
<div>{{contain}}</div>
</div>
</template>
<script>
export default {
name: "child",
data(){
return{
msg:'这里是子组件'
}
},
props:{
title:{
type:String,
default:'子组件默认的标题'
},
contain:{
type:String,
default: '子组件默认的内容,当父组件不传值时会和默认的标题一起显示'
}
}
}
</script>
<style scoped>
</style>
在父组件中调用
因为父组件没有传参,所以展示的是子组件default默认的值
<template>
<div class="parent">
//调用子组件
<child></child>
</div>
</template>
<script>
//引入子组件
import Child from "../components/child";
export default {
//声明子组件
components:{
Child
},
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped>
</style>
父组件传参,传递的参数需要和子组件props中定义的名称一样
第一种调用方法
<template>
<div class="parent">
//调用子组件
<child title="父组件传的标题参数" contain="父组件传的内容参数"></child>
</div>
</template>
<script>
//引入子组件
import Child from "../components/child";
export default {
//声明子组件
components:{
Child
},
data() {
return {
}
},
methods: {
}
}
</script>
<style scoped>
</style>
第二种调用方法,也是和上面相同的调用效果
<template>
<div class="parent">
//调用子组件
<child :title=parentTitle :contain=parentContain></child>
</div>
</template>
<script>
//引入子组件
import Child from "../components/child";
export default {
//声明子组件
components:{
Child
},
data() {
return {
parentTitle:'父组件传的标题参数',
parentContain:'父组件传的内容参数',
}
},
methods: {
}
}
</script>
<style scoped>
</style>
2.子组件向父组件传参 使用$emit事件
实现
当输入框修改信息时,点击按钮,下方信息也会相应改变
//子组件child.vue
<template>
<div class="child-contain">
<input v-model="msg">
<button @click="click">点击传参</button>
</div>
</template>
<script>
export default {
name: "child",
data(){
return{
msg:'来自子组件的信息',
}
},
methods:{
click(){
//通过emit,定义当按钮触发时触发事件将参数传给父组件
this.$emit('childFn', this.msg);
}
}
}
</script>
<style scoped>
</style>
<template>
<div class="parent">
<child @childFn="parentFn"></child>
子组件传过来的参数:{{message}}
</div>
</template>
<script>
import Child from "../components/child";
export default {
components:{
Child
},
data() {
return {
message:''
}
},
methods: {
//名字需要和emit中定义的一样
parentFn(childMes){
this.message = childMes
},
}
}
</script>
<style scoped>
</style>