Vue系列之 => 父组件向子组件传值-优快云博客

本文详细介绍了Vue中父组件向子组件传递数据和方法的过程。通过属性绑定，父组件可以将数据传递给子组件，而通过事件绑定机制，父组件可以接收来自子组件的方法调用，实现双向通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件向子组件传递数据

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="./lib/jquery2.1.4.min.js"></script>
10     <script src="./lib/Vue2.5.17.js"></script>
11     <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
12 </head>
13     
14 <body>
15     <div id="app">
16         <!-- 父组件可以在引用子组件的时候通过属性绑定(v-bind:)的形式把
17         需要传递给子组件的数据以属性绑定的形式传递到子组件内部给子组件使用 -->
18         <com1 v-bind:parentmsg="msg"></com1>
19     </div>
20 
21     <template id="mytem">
22             <div>
23                 工要要地地
24             </div>
25         </template>
26     <script>
27         
28         var vm = new Vue({
29             el: '#app',
30             data: {
31                 msg : '123啊- 父组件中的数据'
32             },
33             methods: {
34                 
35             },
36             components:{
37                 //经过演示，子组件中，默认无法访问到父组件中的data数据和methods方法
38                 com1 : {
39                     // 注意：子组件中的data数据并不是通过父组件传递过来的，而是子组件自身私有的
40                     // props 中的数据都是只读的，无法重新赋值
41                     //比如，子组件通过ajax请求回来的数据，都可以放到data身上
42                     data(){
43                         return {
44                             title : '123',
45                             content : 'qaq'
46                         }
47                     },
48 
49                     // template : '<h1>这是子组件 --- {{ msg }}</h1>' | msg => undefined
50                     template : '<h1>这是子组件 --- {{ parentmsg }}</h1>',
51                     // 注意：组件中所有的props中的数据，都是通过父组件传递给子组件的
52                     //把父组件传递过来的parentmsg属性，先在props数组中定义一下这样才能使用这个数据。
53                     props : ['parentmsg']
54 
55                 }
56             }
57             
58         })
59     </script>
60 </body>
61 
62 </html>

父组件向子组件传递方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="./lib/jquery2.1.4.min.js"></script>
10     <script src="./lib/Vue2.5.17.js"></script>
11     <link href="https://cdn.bootcss.com/animate.css/3.7.0/animate.css" rel="stylesheet">
12 </head>
13     
14 <body>
15     <div id="app">
16         <!-- 父组件向子组件传递方法使用的是事件绑定机制; v-on -->
17        <!-- <com2 v-on:func="show"></com2> -->
18        <!-- 简写 -->
19         <com2 @func="show"></com2>
20     </div>
21 
22     <template id="tmp1">
23             <div>
24                <h1> 这是子组件</h1>
25                <input type="button" value="子组件的按钮" @click="myclick">
26             </div>
27         </template>
28     <script>
29         var com2 = {
30             template : '#tmp1',
31             data(){
32                 return {
33                     sonmsg : {name : '小头儿子' , age : 6}
34                 }
35             },
36             methods: {
37                     myclick(){
38                         //当点击子组件的按钮的时候，如何获取父组件传递过来的func方法并调用这个方法
39                         //emit英文原译是触发，调用的意思
40                         this.$emit('func',this.sonmsg,'第三个参数')
41                     }
42                 },
43         }
44 
45         var vm = new Vue({
46             el: '#app',
47             data: {
48                sonmessage : null
49             },
50             methods: {
51                 show(data,data2){
52                     console.log(data);
53                     console.log('调用了父组件上的 show 方法 ---' + data + data2)
54                     // 把放到父组件自己的data中去
55                     this.sonmessage = data;
56                 }
57             },
58             // 想办法把show方法传给子组件
59             components : {
60                 com2 : com2,
61                 
62             }
63         })
64     </script>
65 </body>
66 
67 </html>