vue组件传值

一、父组件给子组件传值

即父组件通过属性的方式向子组件传值，子组件通过 props 来接收。

父组件:

<template>
   <child :text="text"></child>
</template>
<script>
import child from "./child.vue"
export default {
   
     components: {
   child},
     data(){
   
      return {
   text:"我是父组件传递的值"}
     }
}
</script>

子组件接收的父组件的值分为引用类型和普通类型两种

• 普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）
• 引用类型：数组（Array）、对象（Object）

普通类型子组件接收如下

子组件：

<template>
  <div>{
   {
   text}}</div>
</template>
<script>
  export default {
   
    props:["text"]
    或者：props:{
   
	    text:{
   
	    	type: String,    //类型（类型可以定义多个，例子：type: [String,Number]）
	    	default: ""      //默认值
	    	required：false   //是否为必传项
	    }
    }
  }
</script>

引入类型子组件接收如下

<template>
  <div>{
   {
   text}}</div>
</template>
<script>
  export default {
   
    props:["text"]
    或者：props:{
   
	    text:{
   
	    	type: Array,
      		default: function () {
   
        		return ['张三']
      		}
	    }
    }
  }
</script>

扩展各种的写法：

 props: {
   
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
   
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
   
      type: Number,
      default: 100
    },
    // 数组写法
     propK: {
   
      ty