Table of contents
v-bind is used to pass values from parent to child
v-bind is used to pass values from parent to child
- Use v-bind to bind values
Example (the commented part is the ordinary value-passing writing method)
Parent component:
<template>
<!-- <AboutSon :person="person"></AboutSon> -->
<AboutSon v-bind="person"></AboutSon>
</template>
<script setup>
import { reactive} from 'vue'
// 引入子组件
import AboutSon from '@/views/AboutSon.vue'
// 定义一个对象，一会传给子组件
const person = reactive({ name: '张三', age: 24 })
</script>Subassembly:
<template>
<!-- <div class="aboutson">子组件 --- {
{ person.name }} --- {
{ person.age }}</div> -->
<div class="aboutson">子组件 --- {
{ name }} --- {
{ age }}</div>
</template>
<style scoped></style>
<script setup>
import { defineProps, toRefs } from 'vue'
const props = defineProps({
// 子组件接收父组件传递过来的值
// person: Object,
// 子组件接收父组件传递过来的值
name: String,
age: Number,
})
// let { person } = toRefs(props)
let { name, age } = toRefs(props)
</script>v-bind binding style
- v-bind can also bind variables provided by js. The bound style variables are responsive and can be changed in real time.
Example
<template>
<div class="about"></div>
<button @click="changeBorder">点击修改边框</button>
</template>
<style scoped>
.about {
width: 300px;
height: 300px;
background-color: pink;
border: v-bind(borderStyle);
}
</style>
<script setup>
import { ref } from 'vue'
// 定义一个边框样式变量
let borderStyle = ref('10px solid #ccc')
// 点击修改边框
const changeBorder = () => {
borderStyle.value = '20px solid skyblue'
}
</script>