vue中通过props传值，一定是单向传值吗？如果是引用类型呢？

回答：不一定，如果是基本数据类型，通过props传递的变量，数据是单向传递。如果是引用数据类型，如一个Object对象，则子组件修改值，不需要额外逻辑，也会影响到父组件的值。

• 通过props传递基本数据类型，数据则单向传递。如下代码，父子组件通过props传递remarks变量值，remarks为String基本数据类型变量，数据则单向传递。

------------------------父组件--------------------------------
<script setup>
import {reactive} from "vue";
import SonItem from "./SonItem.vue";

let  formModel = reactive({
  remarks: 'Hello'
})

</script>

<template>
  <div >
    <p>{{formModel}}</p>
    <SonItem :remarks="formModel.remarks" />
  </div>
</template>
-----------------------子组件-----------------------------------
<template>
  <input type="text" v-model="props.remarks"  >
</template>

<script setup>
let props = defineProps({
  remarks:{
    type: String
  }
});
</script>

• 通过props传递引用类型Object，数据则相互影响，非单向传递。如下代码，父子组件通过props传递remarks变量值，remarks为String基本数据类型变量，数据则单向传递。

------------------------父组件--------------------------------
<script setup>
import {reactive} from "vue";
import SonItem from "./SonItem.vue";

let  formModel = reactive({
  itemType: {
    name: 'Fruit'
  }
})

</script>

<template>
  <div >
    <p>{{formModel}}</p>
    <SonItem :item-type="formModel.itemType" />
  </div>
</template>
-----------------------子组件-----------------------------------
<template>
  <input type="text" v-model="props.itemType.name"  >
</template>

<script setup>
let props = defineProps({
  itemType:{
    type: Object
  }
});
</script>

拓展

• js的基本数据类型有
  • Null，只有一个值null，概念上指没有任何对象。
  • Undefined，只有一个值undefined，概念上指没有值。
  • Boolean，有两个值true和false。
  • Number
  • BigInt，表示任意大小的整数。
  • String，文本数据。
  • Symbol，创建全局唯一值，具有唯一性，全局定义唯一；不可性，一旦创建，不可修改；私有性，Symbol类型的键，不能通过for … in等遍历获取。
  • js的引用类型为 Object类型。
• Symbol 类型的使用场景，
  • 定义对外不暴露的键值，如不希望外部通过Object.keys()方法获取键值，或者，for…in遍历时，用Symbol命名键。
  • 代替常量定义。
  • 定义类中私有属性。
  • 通过Symbol.for()注册或获取一个全局实例。
  • 自定义迭代器。Symbol.iterator指代对象的迭代器，实现自定义迭代器的生成器函数。
    示例代码如下

const ID_NUMBER = Symbol('id number'); //可接受参数
const SET_NUMBER = Symbol();

class Person {
  constructor(name, idNumber) {
    this.name = name;
    this[ID_NUMBER] = idNumber; //定义私有属性，外部通过Object.keys()获取到Person类实例的键只有name
    this[SET_NUMBER] = function(ideNumber){ //定义私有方法，其他js包无法调用该方法
      this[ID_NUMBER] = ideNumber
    }
  }
  getIdNumber(){
    return this[ID_NUMBER]; //外部js，只能通过公共方法，访问私有变量
  }
}

• 当引用传递时，在子组件中，通过深拷贝的方式，可以切断父子组件中值的相互影响。例如

let itemCopy = JSON.parse(JSON.stringify(props.itemType))