组件之间的传值

父组件传值给子组件

配置props

父组件调用子组件来显示某一视图，但是如何让子组件显示指定的数据呢？把数据传递给子组件吧。

通过在子组件中配置props属性可以实现——数据从父组件传递到子组件。子组件可以使用这些数据来渲染视图或者执行其他操作。

在子组件中的props配置了哪些属性，就表示允许父组件给子组件的这些属性传值。以下是一个简单的例子。

<template>
  <div>
    <h2>{{ name }}</h2>
    <h2>{{ age }}</h2>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    name: {
      type: String,
      required: true
    },
    age:{
      type:number,
      default:18
    }
  }
}
</script>

传值 —— < Demo name="xx" | :name="xx">

MyComponent组件有一个名为name的props，它的类型是字符串，并且是必需的。

<template>
  <div>
    <MyComponent name="sam" :age="18"></MyComponent>
  </div>
</template>

<script>
  import MyComponet from './component/MyComponent'
  
  export default {
    name: 'App',
    components:{MyComponent}
  }
</script>

将字符串sam传递给MyComponent组件,同时给age这个属性传递一个js表达式（在上述例子中表达式为数字18）之后子组件将在内部使用这个值跟表达式计算后得到的值来渲染视图。

props的一些限制

props的写法有多种，不同的写法有不同的作用

• 简单写法（不对传来值做任何限制）

props:['name'，'age']

• k-v写法 （对传来的值做数据类型的限制）

props:{
  name:String，
  age:Number
}

• 对象写法 （可以对类型、默认值以及是否必传做限制）

props: {
    name: {
      type: String,
      required: true
    },
    age:{
      type:number,
      default:18
    }
  }

单向数据流动

通过props从父组件传递数据到子组件，这个数据是单向流动。简单的说就是在子组件中通过修改对应属性的数据，是无法成功的。

如果确实有业务需求进行改动，可以考虑用中转变量来实现——数据的变更（定义一个本地的 data 属性并将这个 prop 用作其初始值）

<p>{{myAge}}</p>
<button @click="updateDemo"> </button>
//......
data(){
	return{
		myAge:this.age
	}
}
method:{
 updateDemo(){
		this.myAge = 99;
	}
}
props:['age']

在上述例子中，直接操作this.age是无法成功的，所以选择了创建一个中转变量myAge来进行展示。

注意：age的值始终没有被改变,例子中的方法只是为了解决业务场景提供的一种思路

props的更多作用

prop验证：可以通过在props上定义验证函数，对传递过来的数据进行验证。如果数据不符合要求，Vue会显示一个警告信息。