vue prop 传递数据

prop

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

一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。

在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

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

1.静态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>

2.动态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>

3.单向数据流

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.

4.实现组件属性的双向绑定方式

修改prop中的数据，通常有以下原因

1. 组件内部需要修改props。
2. 组件需要可以由外部在运行时动态控制，而非单纯初始化。
3. 组件外部需要读取组件内的状态来进行处理

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

解决方式：

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

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

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

 

5.prop验证

为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。

    props: {
        // bookList: Array   正确的props传入的bookList类型是数组，但是下面定义的是对象
        bookList: Object
    },

当prop验证类型错误时，提示

prop 可验证的数据类型

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

注意:vue props 设置的默认值和类型检查之类的只检测第一层，而里层的内容是不检测的

  props: {
    messageA: {
      type: String,
      required: true
    },
    // 上边的是可以的，而下边的是不可以的   下面的data是第一层，prop会检测类型为对象，第二次为type 类型为数组，prop不会检测第二层
    messageB: {
       data:{
          type: Array,   
          default: 100
       },
     }
  }

 

//父组件
<v-chapter :chapter-name="chapter_name"></v-chapter>

  data(){
    return{
      book_id:'',
      chapter_name:[],
    }
  },


//子组件
export default {
  name:'chapter',
  props: {
    chapterName: Array,
  },
}

//父组件使用chapter-name 子组件需要使用驼峰 chapterName

 

 

 

 

 

 

6.prop传递函数