【vue3入门】-【21】 组件传递数据
组件传递数据_Props
- 静态数据传递
组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间是可以传递数据的
传递数据的解决方案就是props
app.vue
<template>
<!--主要要生效Header中的样式，需要删除main.json中默认的main.css样式-->
<!--不需要再次引入，可以直接使用全局的组件-->
<!-- <Header /> -->
<!-- <Main />
<Aside /> -->
<parent />
</template>
<script>
// import Header from './pages/header.vue'
// import Main from './pages/main.vue'
// import Aside from './pages/aside.vue'
import parent from './components/parent.vue'
export default {
components: {
// Header,
// Main,
// Aside
// 在最上层组件中引用父级组件
parent
}
}
</script>
<style></style>
parent.vue
<template>
<h3>parent</h3>
<!--在引用子级组件时可以跟上需要传递的参数值对，用以传递参数，而后被子级组件中的props中的数据接收-->
<!--允许传递多个参数 空格间隔-->
<child title="parent数据"/>
</template>
<script>
import child from "./child.vue"
export default {
data() {
return {
}
},
// 在父级组件中引用子级组件
components: {
child
}
}
</script>
<style></style>
child.vue
<template>
<h3>child</h3>
<p>{{ title }}</p>
</template>
<script>
export default{
data(){
return{
}
},
// 接收来自父级引用子级组件时传递的参数
props:["title"]
}
</script>
<style></style>
- 动态数据传递
可以通过属性绑定的方式，动态传递数据
<template>
<h3>parent</h3>
<!--在引用子级组件时可以跟上需要传递的参数值对，用以传递参数，而后被子级组件中的props中的数据接收-->
<child title="parent数据" />
<!--动态传递数据-->
<child :title="message" />
</template>
<script>
import child from "./child.vue"
export default {
data() {
return {
message: "动态传递的数据"
}
},
components: {
child
}
}
</script>
<style></style>
注意事项
props传递数据，只能从父级传递到子级，不能从子级传向父级
组件传递多种数据类型
通过props传递数据，不仅可以传递字符串类型的数据，还可以是其他类型，例如：数字、对象、数组等。
但实际上任何类型的值都可以作为props的值被传递
app.vue
<template>
<!--主要要生效Header中的样式，需要删除main.json中默认的main.css样式-->
<!--不需要再次引入，可以直接使用全局的组件-->
<!-- <Header /> -->
<!-- <Main />
<Aside /> -->
<parent />
</template>
<script>
// import Header from './pages/header.vue'
// import Main from './pages/main.vue'
// import Aside from './pages/aside.vue'
import parent from './components/parent.vue'
export default {
components: {
// Header,
// Main,
// Aside
// 在最上层组件中引用父级组件
parent
}
}
</script>
<style></style>
parent.vue
<template>
<h3>parent</h3>
<!--在引用子级组件时可以跟上需要传递的参数值对，用以传递参数，而后被子级组件中的props中的数据接收-->
<!--动态传递数据是使用属性绑定的方式-->
<!--可以传递字符、数字、数组、对象等-->
<child title="parent数据" :msg="message" :age="age" :names="names" :userInfo="user_info" />
</template>
<script>
import child from "./child.vue"
export default {
data() {
return {
message: "动态传递的数据",
age: 20,
names: ["测试1", "测试2", "测试3"],
user_info: {
"name": "test1",
"age": 30
}
}
},
components: {
child
}
}
</script>
<style></style>
child.vue
<template>
<h3>child</h3>
<p>{{ title }}</p>
<p>{{ msg }}</p> <!--字符串类型-->
<p>{{ age }}</p> <!--数字类型传递-->
<ul>
<li v-for="(value, index) of names">{{ value }}</li> <!--数组类型传递-->
</ul>
<p>{{ userInfo.name }}</p> <!--对象类型-->
<p>{{ userInfo.age }}</p>
</template>
<script>
export default{
data(){
return{
}
},
// 接收来自父级引用子级组件时传递的参数,需要和父级传递参数名同名
props:["title","msg","age","names","userInfo"]
}
</script>
<style></style>
组件传递props校验
vue组件可以更细致的声明对传入的props校验要求
- 参数校验
<template>
<h3>componentB</h3>
<p>{{ title }}</p>
</template>
<script>
export default {
data() {
return {
}
},
// 不带参数校验的父级参数接收方式
// props: ["title"]
// 带参数校验的父级参数接收方式
props: {
title: {
// 传递非规定的类型数据时会存在console报错
// type: Number
// 也可以标记多种类型，只要满足其中一种就可以
type: [String, Number, Array, Object]
}
}
}
</script>
参数类型传递错误时，存在console告警
- 默认值校验
<template>
<h3>componentB</h3>
<p>{{ title }}</p>
<p>{{ age }}</p>
<p v-for="(value, index) of names">{{ value }}</p>
</template>
<script>
export default {
data() {
return {
}
},
// 不带参数校验的传递方式
// props: ["title"]
// 带参数校验的传递方式
props: {
title: {
// 传递非规定的类型数据时会存在console报错
// type: String
// 也可以标记多种类型，只要满足其中一种就可以
type: [String, Number, Array, Object],
},
age: {
type: Number,
// 不传时，显示默认值，传递后显示传递的值
// 注意：数字和字符串可以直接default，但是如果是数字和对象，必须通过工厂函数返回默认值
default: 20
},
names: {
type: Array,
// 对于数组和对象类型的值，需要增加函数返回，不能直接返回
default(){
return ["空"]
}
}
}
}
</script>
- 必选项
<template>
<h3>componentB</h3>
<p>{{ title }}</p>
</template>
<script>
export default {
data() {
return {
}
},
// 不带参数校验的传递方式
// props: ["title"]
// 带参数校验的传递方式
props: {
title: {
// 传递非规定的类型数据时会存在console报错
// type: String
// 也可以标记多种类型，只要满足其中一种就可以
type: [String, Number, Array, Object],
// 必填项，如果父级没有传递对应参数时，console会存在告警
required: true
}
}
}
注意：props接收的数据是只读的，修改时会报错
<template>
<h3>componentB</h3>
<p>{{ title }}</p>
<button @click="updatePropParam">修改props参数</button>
</template>
<script>
export default {
data() {
return {
}
},
// 不带参数校验的传递方式
// props: ["title"]
// 带参数校验的传递方式
props: {
title: {
// 传递非规定的类型数据时会存在console报错
// type: String
// 也可以标记多种类型，只要满足其中一种就可以
type: [String, Number, Array, Object],
required: true
},
},
methods: {
updatePropParam() {
console.log(this.title);
// 尝试修改props里面接口的参数数据时会存在异常报错，不允许修改父元素传递过来的数据
this.title="新数据"
}
}
}
</script>
组件数据传递
之前讲解过组件之间的数据传递，propes和自定义事件两种方式
- props：父传子
- 自定义事件$.emit：子传父
除了上述方案，props也可以实现子传父，通过函数执行的方式可以传递子传父
app.vue
<template>
<componentA />
</template>
<script>
import ComponentEvent from "./components/componentEvent.vue"
import Main from "./components/Main.vue"
import ComponentA from "./components/ComponentA.vue"
export default{
components:{
ComponentA
}
}
</script>
componentEventA.vue
<template>
<h3>ComponentA</h3>
<!--使用子组件属性绑定的方式，实现执行函数参数的绑定-->
<ComponentB title="父级静态参数" :onEvent="childParam" />
<p>{{ childMessage }}</p>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
data() {
return {
childMessage: ""
}
},
components: {
ComponentB
},
methods: {
childParam(data) {
console.log("接收来自子级的参数", data)
this.childMessage = data
}
}
}
</script>
componentEventB.vue
<template>
<h3>ComponentB</h3>
<p>{{ title }}</p>
<!--执行从父级传递过来的参数-->
<p>{{ onEvent("子级传递的参数信息") }}</p>
</template>
<script>
export default {
data() {
return {
}
},
props: {
"title": String,
// 接收父级的function函数,主要需要在父级使用绑定方式绑定此参数
onEvent: Function
}
}
</script>
以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9
