- 阐述
- 准备基础代码
- 全局组件 Son
- 父组件向子组件传值（静态传值）
- 动态数据作为参数
- 参数为函数时的用法
本文主要学习的内容是父子组件的传值，包括静态传值和动态传值。
准备基础代码DOCTYPE html>
Demo26
const app = Vue.createApp({
template:`willem.com`
})
const vm= app.mount("#app")
需要说明的是，这里没有引用官方的源，而是使用了 bootcdn 的源，就是为了方便大家等能够轻松访问到源。
有了最基础的代码，我们再来声明一个全局组件 Son。
app.component('Son',{
template:`Son div`
})
因为这个组件是全局的，所以定义好之后就可以直接使用了。（不用在注册声明了）
const app = Vue.createApp({
template:`
willem.com
`
})
使用后可以到浏览器中查看效果，如果正常，此时已经形成了父子组件关系。下面就可以讲解如何从父组件向子组件传值了。
DOCTYPE html>
Demo26
const app = Vue.createApp({
template:`
willem.com
`
})
app.component('Son',{
template:`Son div`
})
const vm= app.mount("#app")
子组件里的 Son div 是写死的，如果想动态的从父组件传递，可以使用属性的方式，然后子组件使用 props 进行接收。
比如我们在调用子组件的地方，通过属性 name 传递一个 willem笔记 的文字进去。
const app = Vue.createApp({
template:`
willem.com
`
})
传递后用 props 在子组件中进行接受，然后用插值表达式（双花括号 {{name}} ）的形式进行打印出来。
app.component('Son',{
props:['name'],
template:`{{name}} div `
})
这样就进行了参数的接收和显示。
DOCTYPE html>
Demo26
const app = Vue.createApp({
template:`
willem.com
`
})
app.component('Son',{
props:['name'],
template:`{{name}} div `
})
const vm= app.mount("#app")
上面代码传递的参数是写死的，不能进行业务逻辑的编写，也就是我们常说的静态参数。
如果想让代码更加的灵活，这里可以使用动态参数的传递。动态参数传递首先要把传递参数放到Vue的数据项里，也就是 data 属性里。
例如在data中声明一个name属性，然后赋值为willem笔记。
这时候需要在 template 中绑定这个 name属性。
这样你的值就不是静态的了，而是动态值。
const app = Vue.createApp({
data(){
return {
name: "willem笔记"
}
},
template:`
willem.com
`
})
DOCTYPE html>
Demo26
const app = Vue.createApp({
data(){
return {
name: "动态willem笔记"
}
},
template:`
willem.com
`
})
app.component('Son',{
props:['name'],
template:`{{name}} div `
})
const vm= app.mount("#app")
当然 v-bind:name 也可以通过简写的方式，写成 :name。
改写后的代码如下:
template:`
willem.com
`
静态参数这里还有一个小坑需要说明一下，就是静态传递的只能是字符串类型String，而动态传参的就可以是多种类型了，甚至是一个函数(方法)。
传递参数的例子，在下面会详细讲解，这里先来看传递数字的例子。
举例说明，比如我们现在改回静态传参，而传递的内容是数字123，但在模板中使用 typeof查看属性时，仍然是字符串（String）。
改为静态传参，参数为123：
template:`
willem.com
`
在子组件用 typeof 查看类型，会发现仍然是 string 类型：
app.component('Son',{
props:['name'],
template:`{{ typeof name}} div `
})
但是改为动态传参，就变成了数字类型。
const app = Vue.createApp({
data(){
return {
name:123
}
},
template:`
willem.com
`
})
DOCTYPE html>
Demo26
const app = Vue.createApp({
data(){
return {
name:123
}
},
template:`
willem.com
`
})
app.component('Son',{
props:['name'],
template:`{{ typeof name}} div `
})
const vm= app.mount("#app")
当使用动态传参时，参数几乎可以是任何类型，甚至是一个函数。 下面我就举一个传递函数的例子，让你进一步的理解动态参数的作用。
需求是这样的，我们编写了一个 XiaoJieJie 的全局子组件，然后点击时，小姐姐会先说请付钱，然后我们传递函数的形式出给钱。
编写小姐姐的子组件:
app.component('XiaoJieJie',{
props:['pay'],
methods:{
handleClick(){
alert('请付钱....')
this.pay() // 付多少钱，是顾客说的算的，所以调用时才能确定
}
},
template:` 和小姐姐，打招呼！ `
})
在父组件调用的时候，pay 是一个定义在 data 中的函数，然后用动态参数的形式进行调用。
const app = Vue.createApp({
data(){
return {
name:123,
pay:()=>{
alert('给你500元')
}
}
},
template:`
willem.com
`
}
以上就是今天关于Vue父子组件的静态和动态传值的知识，下节我们继续讲解组件传值时的一些校验方法的编写。
DOCTYPE html>
Demo26
const app = Vue.createApp({
data(){
return {
name:123,
pay:()=>{
alert('给你500元')
}
}
},
template:`
willem.com
`
})
app.component('XiaoJieJie',{
props:['pay'],
methods:{
handleClick(){
alert('请付钱....')
// 付多少钱，是顾客说的算的，所以调用时才能确定
this.pay()
}
},
template:` 和小姐姐，打招呼！ `
})
app.component('Son',{
props:['name'],
template:`{{ typeof name}} div `
})
const vm= app.mount("#app")
