vue props

props

组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项

使用Prop传递数据包括静态和动态两种形式

静态props

//父组件
<template>
  <div id="app">
    <v-child info="message"></v-child>
  </div>
</template>
<script>
import Child from './components/Child'
export default {
  components:{
    'v-child':Child
  },
  data(){
    return{
      message:''
    }
  }
}
</script>

//子组件
<template>
  <div>{{info}}</div>
</template>
<script>
export default {
  props:['info']
}
</script>

动态props

使用v-bind绑定要传递的数据。每当父组件的数据变化时，该变化也会传导给子组件。

<template>
  <div id="app">
    <div>父级:<input type="text" v-model="message"></div>
    <v-child info="message"></v-child>
  </div>
</template>
<script>
import Child from './components/Child'
export default {
  components:{
    'v-child':Child
  },
  data(){
    return{
      message:''
    }
  }
}
</script>

<template>
  <div>{{info}}</div>
</template>
<script>
export default {
  props:['info']
}
</script>

单向数据流

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出警告

//父
<template>
  <div id="app">
    <div>父级:<input type="text" v-model="message"></div>
    <v-child :info="message"></v-child>
  </div>
</template>
<script>
import Child from './components/Child'
export default {
  components:{
    'v-child':Child
  },
  data(){
    return{
      message:''
    }
  }
}
</script>

//子
<template>
  <div>子:<input type="text" v-model="info"></div>
</template>
<script>
export default {
  props:['info']
}
</script>

控制台弹出警告

[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中的数据，通常有以下两种原因

　　1、prop 作为初始值传入后，子组件想把它当作局部数据来用

　　2、prop 作为初始值传入，由子组件处理成其它数据输出

　　[注意]JS中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态

解决方式：

1. 在组件内的data对象中创建一个props属性的副本

2. 创建针对props属性的watch来同步组件外对props的修改

3. 创建针对props副本的watch，通知到组件外