Vue 3.x 父子组件传值 props ref
一、父组件给子组件传值
1、父组件调用子组件时，在子组件上加上绑定参数
<template>
<div>
<!-- 3、展示组件，:title="msg" 表示向<my-header> 子组件传入参数title ，也可以使用 home="this" 把整个父组件传给子组件><-->
<my-header :title="msg" home="this"></my-header>
</div>
</template>
<script>
//1、引入组件
import MyHeader from '../components/MyHeader'
export default {
data() {
return {
msg: "主页"
}
},
//2、挂载组件
components:{
MyHeader
}
};
</script>
:title="msg" 表示向 mytitle 或者 my-title，如果使用横杠命名的，子组件prop中接收时不能使用横杠，要使用驼峰命名
<my-header :my-title="msg" home="this"></my-header>正确
<my-header :myTitle="msg" home="this"></my-header>错误
prop:[myTitle]正确，
prop[my-title]错误
2、子组件使用props接收父组件传过来的参数
<template>
<div>
<h2>{{msg}}</h2>
<hr>
<h2>{{title}}</h2>
<button @click="getTitle">获取父组件传过来的title</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "头部组件"
}
},
//使用props 接收父组件传过来的值,是一个数组，多个参数可以使用逗号分开
props:["title","home"],
methods:{
getTitle(){
//方法中使用父组件传过来的参数，可以使用 this
alert(this.title)
//或者 this.home.title
}
}
}
</script>
<style lang="scss" scoped>
</style>
注：props 是一个数组，多个参数可以使用逗号分开，方法中使用父组件传过来的参数，可以使用 this
效果展示如下：
3、props验证
props:{
btnvalue:{
type:[Number,String],
default:10, // 默认值
required:true //可以使用required选项来声明这个参数是否必须传入。
// default与required 一般并不同时写
}
props: {
// fooA只接受数值类型的参数
fooA: Number,
// fooB可以接受字符串和数值类型的参数
fooB: [String, Number],
// fooC可以接受字符串类型的参数，并且这个参数必须传入
fooC: {
type: String,
required: true
},
// fooD接受数值类型的参数，如果不传入的话默认就是100
fooD: {
type: Number,
default: 100
},
// fooE接受对象类型的参数
fooE: {
type: Object,
// 当为对象类型设置默认值时必须使用函数返回
default: function(){
return { message: 'Hello, world' }
}
},
// fooF使用一个自定义的验证器
fooF: {
validator: function(value){
return value>=0 && value<=100;
}
}
4、单向数据流
父组件的props 参数值发生变化后，子组件的值会相应变化，但是直接改变子组件的值，父组件不会跟着变化
二、子组件给父组件传值
方法一：使用 ref
ref放在标签上，拿到的是原生dom节点
ref放在组件上，拿到的是组件对象
1、调用子组件的时候定义一个 ref
<v-header ref="header"></ v-header>
2、父组件主动获取子组件的数据，使用 $refs
this.$refs.header.属性
this.$refs.header.方法
3、子组件主动获取父组件的数据
this.$parent.数据
this.$parent.方法
以上这种方法可以改变父组件的数据 this.$parent.name="张晓菲",父组件的name就变成 张晓菲 了
