Vue.js之父组件向子组件传值

cloudOnSkyline

已于 2022-07-19 14:40:56 修改

阅读量756

点赞数

分类专栏： JavaScript 文章标签： vue.js javascript

于 2022-07-18 21:24:39 首次发布

本文链接：https://blog.csdn.net/weixin_44827643/article/details/125859928

版权

JavaScript 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

本文主要介绍在Vue.js中父组件如何向子组件进行传值。通过案例进行具体介绍。

1.定义父子组件

这是定义的父组件，其中包含了msg及father数据

 let vm = new Vue({
            el: '#app',
            data: {
                msg: '父组件',
                father: [{
                    name: '张三',
                    age: 45
                }, {
                    name: '李四',
                    age: 69
                }]
            }
        })

这是定义的子组件（注意：这里的子组件为全局组件，需要定义在父组件的上方）

Vue.component('son', {
            data: function() {
                return {
                    smsg: '子组件',
                    son: [{
                        name: '张三儿子',
                        age: 10
                    }, {
                        name: '李四儿子',
                        age: 29
                    }]
                }

            },
            template: ``

        });

现提出问题：如何在子组件中获取到父组件中的father数组？

2.传值

通过属性直接传值或绑定属性传动态的值

<son :title="father"></son>

3.接受值

在子组件中定义props数组接受传递过来的值

props: ['title']

4.使用值

在子组件的template模板中使用传递过来的值

 template: `
                <ul>
                <li v-for='item in title' v-text='"姓名："+item.name+" , 年龄："+item.age'></li>    
                </ul>
           `

5.注意事项

（1）命名规则

传值（标签中）和接收值（模板中）的命名：a.全小写，b.短横线（标签中）对应驼峰命名

（2）传值类型

包含数值、字符串、数组、对象、布尔等

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 父组件 -->
    <div id="app">
        <div v-text="msg"></div>
        <!-- 子组件 :通过属性直接传值或绑定属性传动态的值-->
        <son f-name="张氏"></son>
        <son :title="father"></son>
    </div>


    <script src="./vue.min.js">
    </script>
    <script>
        Vue.component('son', {
            // 父组件传过来的值,命名规则：要么全小写，要么短横线（标签中）对应驼峰命名
            props: ['fName', 'title'],
            data: function() {
                return {
                    smsg: '子组件',
                    son: [{
                        name: '张三儿子',
                        age: 10
                    }, {
                        name: '李四儿子',
                        age: 29
                    }]
                }

            },
            template: `<div>
                <div v-text="smsg"></div>
                <div v-text="fName"></div>
                <ul>
                <li v-for='item in title' v-text='"姓名："+item.name+" , 年龄："+item.age'></li>    
                </ul>
                </div>`

        });
        let vm = new Vue({
            el: '#app',
            data: {
                msg: '父组件',
                father: [{
                    name: '张三',
                    age: 45
                }, {
                    name: '李四',
                    age: 69
                }]
            }
        })
    </script>
</body>

</html>