目录

v-bind用于父向子传值

v-bind绑定样式

v-bind用于父向子传值

• 利用v-bind进行绑定值

 举例（注释的部分是普通传值写法）

父组件：

<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>

子组件：

<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绑定样式

• v-bind还可以绑定js提供的变量，绑定的样式变量是响应式的，可以进行实时改变

举例

<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>