<nut-cell title="工作写实" :is-link="true" to="/realistic/list" :show-icon="true" />怎么传值,怎么取值
时间: 2023-07-02 12:11:19 浏览: 55
你可以使用props来传递值,例如:
```html
<!-- 父组件 -->
<template>
<div>
<nut-cell :title="title" :is-link="isLink" :show-icon="showIcon" />
</div>
</template>
<script>
import NutCell from '@/components/NutCell.vue'
export default {
components: {
NutCell
},
data() {
return {
title: '工作写实',
isLink: true,
showIcon: true
}
}
}
</script>
```
你可以在子组件中使用props来接收这些值,例如:
```html
<!-- 子组件 NutCell.vue -->
<template>
<div class="nut-cell">
<div class="nut-cell__title">{{ title }}</div>
<div class="nut-cell__right-icon" v-if="showIcon">
<i class="iconfont icon-right"></i>
</div>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
},
isLink: {
type: Boolean,
default: false
},
showIcon: {
type: Boolean,
default: false
}
}
}
</script>
```
这样就能够在父组件中传递数据给子组件了,子组件可以根据props来渲染自己的内容。对于父组件来说,可以使用computed或者methods来获取子组件的数据,例如:
```html
<!-- 父组件 -->
<template>
<div>
<nut-cell ref="cell" :title="title" :is-link="isLink" :show-icon="showIcon" />
<button @click="handleClick">获取子组件数据</button>
</div>
</template>
<script>
import NutCell from '@/components/NutCell.vue'
export default {
components: {
NutCell
},
data() {
return {
title: '工作写实',
isLink: true,
showIcon: true
}
},
methods: {
handleClick() {
const title = this.$refs.cell.title
const isLink = this.$refs.cell.isLink
const showIcon = this.$refs.cell.showIcon
console.log(title, isLink, showIcon)
}
}
}
</script>
```
在这个例子中,我们通过在父组件中给子组件添加ref属性来获取子组件的实例,并且通过访问子组件的属性来获取子组件的数据。