vue中父子组件传参时props使用问题（一）

情景： 父组件给子组件传参
注意事项：
1. props传递数据作用域是孤立的，它是父组件通过模板传递而来，
2. 想接收到父组件传来的数据，需要通过props选项来进行接收。
3. 子组件需要显示的声明接收父组件传递来的数据的数量，类型，初始值。
4. 简单的接收可以通过数组的形式来进行接收。
5. Vue传递数据时是基于数据单向流动，子组件不能改变 props 任何属性，需要通知父组件改变相应的值，重新改变。

传参形式：(前两种是原子化)
1. 动态传参（:params1=‘msg’）
2. 直接定义字面量（params2=‘传给子组件2’）
3. 传函数（:paramsFn=“fn”）
4. 传对象（v-bind=‘obj’）【一定要写v-bind 否则接收不到】
代码如下：

  <div style="padding-top:50px;">
    <h1>父组件</h1>
    <button @click="changeMsg">点击修改参数1</button>
    <Child :params1='msg' params2='传给子组件2'></Child>
  </div>
  
import Child from './Child'
  data () {
    return {
      msg:'传给子组件1'
    }
  },
  components: {
    Child
  },
  methods:{
    changeMsg(){
      this.msg='传给子组件1Fn--修改后'
    }
 }

    <h5>子组件</h5>
    子组件接收的参数：
    <span style="color:green">{{params1}} ；{{params2}}</span>
    
   props:['params1','params2'], // 定义接收的参数，可以采用对象的形式，设置类型及默认值等

释义

1. 传的参数为对象 v-bind = ‘obj’

<Child v-bind='obj' ></Child>

在子组件模板内部对其进行了一个封装，把其展开则跟 props 原子化原理是一个原理

<Child :keyA='value1' :keyB='value2' ></Child>

2. 子组件不能直接修改props参数
   解决方法：
   a. 将props参数传给子组件的某个变量，直接修改变量
   b. 通过子组件的computed 过滤处理

props: ['msg'],
data: function () {
  return { myMsg: this.msg }
}

this.myMsg = 'new Vue'  // 方法a:修改myMsg

// 方法b:
computed : {
   computedMsg () {
       return this.msg + 1
   }
}