点击按钮父传子判断是否等于1等于就是2不等于就是0
时间: 2024-02-17 16:03:02 浏览: 20
可以使用Vue.js框架中的props属性来实现父组件向子组件传递数据。具体实现步骤如下:
1. 在父组件中定义一个数据变量,用来存储按钮点击的状态值:
```javascript
data() {
return {
btnStatus: 0 // 默认值为0
}
}
```
2. 在父组件中定义一个方法,用来改变按钮状态值:
```javascript
methods: {
btnClick() {
if (this.btnStatus === 0) {
this.btnStatus = 2
} else {
this.btnStatus = 0
}
}
}
```
3. 在父组件中使用子组件,并将按钮状态值作为props属性传递给子组件:
```html
<template>
<div>
<child-component :status="btnStatus"></child-component>
<button @click="btnClick">点击按钮</button>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
btnStatus: 0
}
},
methods: {
btnClick() {
if (this.btnStatus === 0) {
this.btnStatus = 2
} else {
this.btnStatus = 0
}
}
}
}
</script>
```
4. 在子组件中接收父组件传递过来的状态值,并根据状态值进行渲染:
```html
<template>
<div>
<span v-if="status === 2">等于2</span>
<span v-else-if="status === 1">等于1</span>
<span v-else>等于0</span>
</div>
</template>
<script>
export default {
props: {
status: {
type: Number,
default: 0
}
}
}
</script>
```
这样就可以实现点击按钮后,父组件的btnStatus状态值发生改变,子组件根据该状态值进行渲染,从而实现判断是否等于1等于就是2不等于就是0的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)