一、用法
1、父组件给子组件传参
2、数据从父组件传递给子组件，只能单项绑定。
3、在子组件内不应该修改父组件传递过来的数据。（若特殊情况需要改变，最后一栏有介绍）
父组件、子组件概念：
组件（父组件）中引入另一个组件（子组件）。
二、父组件传参给子组件 - props
1、传静态数据
1、父组件传参
<template>
<div id="father">
<div>我是父亲，我通过 props 给儿子传参</div>
<!-- 三、子组件：通过占位符添加特性的方式来传参 -->
<Son
username="张三"
:height="160"
color="红色"
></Son>
</div>
</template>
<script>
// 一、引入组件
import Son from '@/components/son/Son'
export default {
name: "Father",
data() {
return {};
},
// 二、在 components 中 写入组件
components:{Son}
};
</script>
<style></style>
2、子组件拿值
<template>
<div id="SonCat">
<span> 我是Cat 的儿子 </span>
<!-- 二、在 节点中显示 -->
<p>身高：{{height}}</p><p>名字：{{username}}</p>
<button @click="getPropsFn">点击我获取父亲传给我的参数</button>
</div>
</template>
<script>
export default {
name: "SonCat",
// 一、引入参数
props:['username','height','color'],
data() {return {};},
methods: {
// 三、js中拿到值 (不可用 es6 语法，否则拿不到值)
getPropsFn:function(){
console.log(this.height)
},
},
};
</script>
<style></style>
2、传动态单数据、数字类型
1、父组件传参
<template>
<div id="father">
<div>我是父亲，我通过 props 给儿子传参</div>
<!-- 四、调用子组件 ，传动态参数-->
<Son
:height="height"
></Son>
</div>
</template>
<script>
// 一、引入组件
import Son from '@/components/son/Son'
export default {
name: "Father",
data() {
// 三、设置参数
return {height:1000};
},
// 二、在 components 中 写入组件
components:{Son}
};
</script>
2、子组件拿值
<template>
<div id="SonCat">
<span> 我是Cat 的儿子 </span>
<!-- 二、在 节点中显示 -->
<p>身高：{{height}}</p>
<button @click="getPropsFn">点击我获取父亲传给我的参数</button>
</div>
</template>
<script>
export default {
name: "SonCat",
// 一、引入参数
props:['height'],
data() { return {}; },
methods: {
// 三、js中拿到值 (不可用 es6 语法，否则拿不到值)
getPropsFn:function(){
console.log(this.height)
},
},
};
</script>
<style></style>
3、传动态数据表
三、props 详解
一、props验证：如果传入的数据不符合规格，Vue会发出警告。
prpos 要指定验证规格，需要用对象的形式，而不能用字符串数组
props:{
// height:Number
height:Array
},
`type 可以是下面原生构造器:`
String
Number
Boolean
Function
Object
Array
Symbol
二、修改prop数据
一般情况子组件拿到 父亲传的 props 值直接显示数据，也有少数需在 子组件修改参数。
子组件中修改prop中的数据，通常有以下两种原因
1、prop 作为初始值传入后，子组件想把它当作局部数据来用
2、prop 作为初始值传入，由子组件处理成其它数据输出
1、在子组件定义的局部变量接受props值 (Son 组件)
注：只能接受 props 传的初始值，当父组件要传递的值发生变化时，dataHeight无法接收到最新值
<template>
<div id="SonCat">
<span> 我是Cat 的儿子 </span>
<p>身高：{{height}}</p>
<!-- 三、页面显示 -->
<p>初始值：{{dataHeight}}</p>
<button @click="getPropsFn">打印获取的父亲值</button>
</div>
</template>
<script>
export default {
name: "SonCat",
// 一、引入参数
props:['height'],
data() {
return {
// 二、拿到 props 值
dataHeight:this.height
};
},
methods: {
getPropsFn:function(){
console.log(this.height)
},
},
};
</script>
<style></style>
2、使用变量储存prop的初始值，并使用watch来观察prop的值的变化。发生变化时，更新变量的值 （Son）
最常使用
<template>
<div id="SonCat">
<span> 我是Cat 的儿子 </span>
<p>身高：{{height}}</p>
<!-- 四、页面显示 -->
<p>初始值：{{dataHeight}}</p>
<button @click="getPropsFn">打印获取的父亲值</button>
</div>
</template>
<script>
export default {
name: "SonCat",
// 一、引入参数
props:['height'],
data() {
return {
// 二、props 值传给 局部变量
dataHeight:this.height
};
},
methods: {
getPropsFn:function(){
console.log(this.height)
},
},
// 三、监控 props 值的变化，进行下一步操作
watch:{
height(){
this.dataHeight = this.height
console.log("父亲传的值发生改变，儿子的操作开始...")
}
}
};
</script>
<style></style>
