10

第一:传递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声明变量类似。


狂奔的蜗牛
744 声望21 粉丝

我一人,我异人,我亦人