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

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

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



-----------------------子组件-----------------------------------



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



-----------------------子组件-----------------------------------



拓展

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

你可能感兴趣的:(vue.js,javascript,前端)