乐趣区

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

jiezi

第一：传递 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 传递数据的过程中，如果传递的是 基本数据类型，则在子组件中不能修改父组件传递过来的值，此时符合 cue 的单向数据流方式；

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

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

退出移动版