码云 Vue3教程 2021-06-15

26. [组件]Vue父子组件的静态和动态传值

AI 概述

准备基础代码父组件向子组件传值（静态传值）动态数据作为参数参数为函数时的用法本文主要学习的内容是父子组件的传值，包括静态传值和动态传值。准备基础代码打开 vscode，需要新建一个文件，这里就叫做Demo26.html，代码如下： <!DOCTYPE html> <html lang="en"> <head> ...

文章目录隐藏

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

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

准备基础代码

打开 vscode，需要新建一个文件，这里就叫做Demo26.html，代码如下：

<!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({
        template:`<h2>mybj123.com</h2>`
    })

    const vm= app.mount("#app")
</script>
</html>

需要说明的是，这里没有引用官方的源，而是使用了bootcdn的源，就是为了方便大家等能够轻松访问到源。有了最基础的代码，我们再来声明一个全局组件Son。

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

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

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

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

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

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

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

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

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

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

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

动态数据作为参数

上面代码传递的参数是写死的，不能进行业务逻辑的编写，也就是我们常说的静态参数。如果想让代码更加的灵活，这里可以使用动态参数的传递。动态参数传递首先要把传递参数放到 Vue 的数据项里，也就是data属性里。

例如在data中声明一个 name 属性，然后赋值为码云笔记。这时候需要在template中绑定这个 name 属性。这样你的值就不是静态的了，而是动态值。

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

当然v-bind:name也可以通过简写的方式，写成:name。改写后的代码如下:

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

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

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

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

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

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

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

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

但是改为动态传参，就变成了数字类型。

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

参数为函数时的用法

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

需求是这样的，我们编写了一个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>mybj123.com</h2>
        <Son :name="name" />
        <xiao-jie-jie :pay="pay"/>
    `
}

以上就是今天关于 Vue 父子组件的静态和动态传值的知识，下节我们继续讲解组件传值时的一些校验方法的编写。更多前端教程请关注微信公众号码云笔记。

以上关于26. [组件]Vue父子组件的静态和动态传值的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » 26. [组件]Vue父子组件的静态和动态传值