父组件传给子组件的值怎么做判断
时间: 2023-09-16 07:06:38 浏览: 39
可以在子组件中使用 `props` 接收父组件传递的值,然后使用条件语句判断。例如:
```vue
<template>
<div>
<h1>{{ title }}</h1>
<p v-if="content">{{ content }}</p>
<p v-else>No content available.</p>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
required: true
},
content: {
type: String
}
}
}
</script>
```
在上面的代码中,我们定义了一个子组件,它接收 `title` 和 `content` 两个属性。如果 `content` 存在,就显示内容,否则显示默认提示语。在父组件中使用该子组件时,可以这样传递参数:
```vue
<template>
<div>
<my-component title="Title" :content="message"></my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue'
export default {
components: {
'my-component': MyComponent
},
data() {
return {
message: 'Content'
}
}
}
</script>
```
在上面的代码中,我们将 `title` 设为 `"Title"`,并将 `content` 的值绑定到 `message` 变量。如果 `message` 为 `null` 或 `undefined`,则显示默认提示语。否则,显示 `message` 的值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)