day03-05

最新推荐文章于 2024-10-01 20:12:28 发布

serendipitymm

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量59

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/serendipitymm/article/details/121162385

版权

父子组件

其实就是在一个组件中饮用另外一个组件

引用

调用

使用

组件传值

我在父组件中有个数据我能在子组件中直接使用吗？不能

我在子组件中有个数据我能在父组件中直接使用吗？不能

结论：组件与组件之间是完全独立的一个个体，无论组件是什么关系，都不能相互使用数据

正向传值--props

父组件把数据给子组件使用，

1.子组件需要使用props来创建接受传递过来数据的变量

props写在与data同级的位置

语法：

props：[变量1，变量2....变量n]

<template>
<div>
{{xiaoming}}
</div>
</template>

<script>
export default {
props:["xiaoming"]
}
</script>

2.父组件就要给他传递数据

在子组件被调用的时候把子组件的props当做一个属性来进行传值

<div class="bottombar">

<Zi xiaoming="数据1"/>
<Zi xiaoming="你好"/>
<Zi xiaoming="购物车1"/>
<Zi xiaoming="购物车2"/>
<Zi xiaoming="购物车3"/>
</div>

props验证

就是在现有的正向传值之上对父组件传递给子组件的数据进行数据格式或者类型的验证

1.组件接受的时候需要设置接受数据的验证

props：{

你要接收数据的变量：数据类型

你接受数据的变量：{数据类型1，数据类型2}

你接受数据的变量：{

type：你要验证的数据类型，

default：默认数据类型

}

props:{
//text:String 只验证一种类型
text:[String,Number]
}

默认值语法

props:{
//text:String 只验证一种类型
// text:[String,Number]
text:{
type:String,
// 默认值
default:"你好我是默认值"
}
}

逆向传值

子组件把数据给父组件使用

逆向传值默认是不被允许的如果想逆向传值的话，那么我们必须要通过自定义事件来完成

逆行传值必须要通过一个事件来处罚自定义事件的创建

实现：

1.在子组件中必须要用一个事件来触发逆向传值

<template>
<div>
zizzizizizizizi
<button v-on:click="fun()">点我进行逆向传值</button>
</div>
</template>

<script>
export default {
methods:{
fun(){

}
}
}
</script>

<style>

</style>

2.自定义事件使用this.$emit()来实现自定义时间

语法：this.$emit(“自定义事件名”，“数据”)

<template>
<div>
zizzizizizizizi
<button v-on:click="fun()">点我进行逆向传值</button>
</div>
</template>

<script>
export default {
methods:{
fun(){
// 创建自定义事件
this.$emit("xiaoming","我是子组件的数据^_*!")
}
}
}
</script>

<style>

</style>

3.父组件接受这个自定义事件

<template>
<div>
fufuffufufufufufufu

<Nz @xiaoming="demo"/>
</div>
</template>

<script>
import Nz from "./nizi.vue"
export default {
methods:{
// 这个形参就是子组件传递的数据会自动传给形参
demo(val){
console.log(val);
}
},
components:{
Nz
}
}
</script>

<style>
div{
font-size: 0.2rem;
}
</style>