vue项目props传值类型影响：单项数据流及双向数据流

2024年3月10日 294次阅读 来源: 狂奔的蜗牛

第一：传递string、number等基本数据类型：
在构建vue项目中，props是子组件获取父组件的一种形式；在子组件中不可修改父组件传递的参数，代码如下：
1、父组件代码：

<template>
  <div class="hello">
    <childComponent @touchParentFuc="touchParentFuc" :fatherPassChild="fatherPassChild"></childComponent>
  </div>
</template>

<script>
import childComponent from './childComponent'
export default {
  name: 'HelloWorld',
  components: {
    childComponent
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      fatherPassChild: '父传子'
    }
  },
  methods: {
    touchParentFuc () {
      console.log(this.fatherPassChild)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

2、子组件代码：

<template>
  <div class="hello">
    <div>这是子组件</div>
    <div>这是父组件的值：{{fatherPassChild}}</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['fatherPassChild'],
  created () {
    this.touchParentFuc()
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    touchParentFuc () {
      this.fatherPassChild = '888'
      this.$emit('touchParentFuc')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

注释：
页面展示子组件修改后的值：
“这是子组件
这是父组件的值：888”；
在子组件中，尝试修改父组件传递过来的值，此时chrome控制台会报错:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "fatherPassChild"；
同时，父组件中，打印的字段为修改之前的字段:
父传子 。

第二：传递数组、对象等引用型数据类型：
如果通过props传递引用数据类型，在子组件中改修父组件的属性值，会出现什么情况？撸码如下：
1、父组件代码：

<template>
  <div class="hello">
    <childComponent @touchParentFuc="touchParentFuc" :fatherPassChild="fatherPassChild"></childComponent>
  </div>
</template>

<script>
import childComponent from './childComponent'
export default {
  name: 'HelloWorld',
  components: {
    childComponent
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      fatherPassChild: {
        objData: 'my is object'
      }
    }
  },
  methods: {
    touchParentFuc () {
      console.log(this.fatherPassChild)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

2、子组件代码：

<template>
  <div class="hello">
    <div>这是子组件</div>
    <div>这是父组件的值：{{fatherPassChild.objData}}</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['fatherPassChild'],
  created () {
    this.touchParentFuc()
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    touchParentFuc () {
      this.fatherPassChild.objData = 'object is my'
      this.$emit('touchParentFuc')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

注释：

此时，页面展示的内容是子组件修改后；同时，控制台并没有报错；why？

按照官网的解释：

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

简单总结：1、在使用props传递数据的过程中，如果传递的是基本数据类型，则在子组件中不能修改父组件传递过来的值，此时符合vue的单向数据流方式；

2、如果传递的是引用型数据类型，则此时可以在子组件操作父组件传递过来的值，此时数据可以双向通信，违背单向数据流方式。

个人理解：props传递参数不同，导致子组件是否能更改父组件props传递的值；跟const声明变量类似。

    原文作者：狂奔的蜗牛
    原文地址: https://segmentfault.com/a/1190000019899941
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞