26 父组件向子组件（动静态）传值，参数为函数时的用法

阳光穿透心脏的1/2处 2023-10-06 20:36 2阅读 0赞

#### \[组件\]Vue父子组件的静态和动态传值 ####

*  阐述
 *  准备基础代码
 *  全局组件 Son
 *  父组件向子组件传值（静态传值）
 *  动态数据作为参数
 *  参数为函数时的用法

## 阐述 ##

本文主要学习的内容是父子组件的传值，包括静态传值和动态传值。

## 准备基础代码 ##

需要说明的是，这里没有引用官方的源，而是使用了 `bootcdn` 的源，就是为了方便大家等能够轻松访问到源。

## 全局组件 Son ##

有了最基础的代码，我们再来声明一个全局组件 `Son`。

app.component('Son',{
        template:`<div>Son div</div>`
    })

因为这个组件是全局的，所以定义好之后就可以直接使用了。（不用在注册声明了）

const app = Vue.createApp({
        template:`
            <h2>willem.com</h2>
            <Son />
        `
    })

使用后可以到浏览器中查看效果，如果正常，此时已经形成了父子组件关系。下面就可以讲解如何从父组件向子组件传值了。

## 父组件向子组件传值（静态传值） ##

子组件里的 `Son div` 是写死的，如果想动态的从父组件传递，可以使用属性的方式，然后子组件使用 `props` 进行接收。

比如我们在调用子组件的地方，通过属性 `name` 传递一个 willem笔记 的文字进去。

const app = Vue.createApp({
        template:`
            <h2>willem.com</h2>
            <Son name="willem笔记" />
        `
    })

传递后用 `props` 在子组件中进行接受，然后用插值表达式（双花括号 `{ {name}}` ）的形式进行打印出来。

app.component('Son',{
        props:['name'],
        template:`<div>{
       {name}} div </div>`
    })

这样就进行了参数的接收和显示。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

## 动态数据作为参数 ##

上面代码传递的参数是写死的，不能进行业务逻辑的编写，也就是我们常说的静态参数。

如果想让代码更加的灵活，这里可以使用动态参数的传递。动态参数传递首先要把传递参数放到Vue的数据项里，也就是 `data` 属性里。

例如在`data`中声明一个`name`属性，然后赋值为willem笔记。

这时候需要在 `template` 中绑定这个 `name`属性。

这样你的值就不是静态的了，而是动态值。

const app = Vue.createApp({
        data(){
            return {
                name: "willem笔记"
            }
        },
        template:`
            <h2>willem.com</h2>
            <Son v-bind:name="name" />
        `
    })

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]

当然 `v-bind:name` 也可以通过简写的方式，写成 `:name`。

改写后的代码如下:

template:`
        <h2>willem.com</h2>
        <Son :name="name" />
    `

> 静态参数这里还有一个小坑需要说明一下，就是静态传递的只能是字符串类型String，而动态传参的就可以是多种类型了，甚至是一个函数(方法)。

传递参数的例子，在下面会详细讲解，这里先来看传递数字的例子。

举例说明，比如我们现在改回静态传参，而传递的内容是数字123，但在模板中使用 `typeof`查看属性时，仍然是字符串（String）。

改为静态传参，参数为123：

template:`
        <h2>willem.com</h2>
        <Son name="123" />
    `

在子组件用 `typeof` 查看类型，会发现仍然是 `string` 类型：

app.component('Son',{
        props:['name'],
        template:`<div>{
       { typeof name}} div </div>`
    })

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
但是改为动态传参，就变成了数字类型。

const app = Vue.createApp({
        data(){
            return {
                name:123
            }
        },
        template:`
            <h2>willem.com</h2>
            <Son :name="name" />
        `
    })

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]

## 参数为函数时的用法 ##

当使用动态传参时，参数几乎可以是任何类型，甚至是一个函数。  
下面我就举一个传递函数的例子，让你进一步的理解动态参数的作用。

需求是这样的，我们编写了一个 `XiaoJieJie` 的全局子组件，然后点击时，小姐姐会先说请付钱，然后我们传递函数的形式出给钱。

编写小姐姐的子组件:

app.component('XiaoJieJie',{
        props:['pay'],
        methods:{
            handleClick(){
                alert('请付钱....')
                this.pay()  // 付多少钱，是顾客说的算的，所以调用时才能确定
            }
        },
        template:`<div @click="this.handleClick"> 和小姐姐，打招呼！ </div>`
    })

在父组件调用的时候，`pay` 是一个定义在 `data` 中的函数，然后用动态参数的形式进行调用。

const app = Vue.createApp({
        data(){
            return {
                name:123,
                pay:()=>{
                    alert('给你500元')
                }
            }
        },
        template:`
            <h2>willem.com</h2>
            <Son :name="name" />
            <xiao-jie-jie :pay="pay"/>
        `
    }

以上就是今天关于Vue父子组件的静态和动态传值的知识，下节我们继续讲解组件传值时的一些校验方法的编写。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Demo26</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    </head>
    <body>
        <div id="app"></div>
    </body>
    <script>
        const app = Vue.createApp({
          
            data(){
          
                return {
          
                    name:123,
                    pay:()=>{
          
                        alert('给你500元')
                    }
                }
            },
            template:`
                <h2>willem.com</h2>
                <Son :name="name" />
                <xiao-jie-jie :pay="pay"/>
            `
        })
    
        app.component('XiaoJieJie',{
          
            props:['pay'],
            methods:{
          
                handleClick(){
          
                    alert('请付钱....')
                    // 付多少钱，是顾客说的算的，所以调用时才能确定
                    this.pay()
                }
            },
            template:`<div @click="this.handleClick"> 和小姐姐，打招呼！ </div>`
        })
    
    
        app.component('Son',{
          
            props:['name'],
            template:`<div>{
           { typeof name}} div </div>`
        })
    
        const vm= app.mount("#app")
    </script>
    </html>

![在这里插入图片描述][b1a83f6213514e8eb907e68813afe4c3.gif_pic_center]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/619378e243724a12ab739d9dd4372f07.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/1b5522a90fed468bad796cb0b049af33.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/653620ce160b464bb1f9b2ea8ca38e01.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_19_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/b25a37f40e484777abe99e054f88652e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_19,color_FFFFFF,t_70,g_se,x_16
[b1a83f6213514e8eb907e68813afe4c3.gif_pic_center]: https://img-blog.csdnimg.cn/b1a83f6213514e8eb907e68813afe4c3.gif#pic_center