Vue父子组件之间传值

一、父组件向子组件传值：

  1. 在父组件中调用子组件时，使用v-bind将要传的值进行绑定 
    <com :parentmsg="msg"></com>

     

  2. 在子组件的props中，添加第一步中为接收父组件数据而定义的变量 
    props: ["parentmsg"]

     

  3. 子组件可使用 this.parentMsg 来调用父组件的数据 msg

 

二、子组件向父组件传值：

  1. 父组件中先定义一个方法a用来获取子组件的值 
    methods: {
                getChildMsg (data) {
                    this.childMsg = data
                }
            },

     

  2. 在父组件中调用子组件时，将父组件的那个方法与子组件中的一个方法b绑定 
            <com :parentmsg="msg" @func='getChildMsg'></com>

     

  3. 在子组件中定义另一个方法c来处理用于绑定父组件方法的方法b，方法c 使用 $emit，第一个参数为方法b的名称，第二个参数为要传递给父组件的值 
    methods: {
                sendToParent () {
                    this.$emit('func', this.msg)
                },
            },

     

  4. 在子组件中用合适的方法调用 c 实现向父组件传值 
    created() {
                this.sendToParent()
            },

     

  5. 父组件可使用 this.childMsg 来调用子组件的数据 msg

 

实例代码：

 1 <body>
 2     <div id="app">
 3         <com :parentmsg="msg" @func='getChildMsg'></com>
 4         <!-- 在父组件中可调用子组件中的数据 -->
 5         <h2>{{childMsg}}</h2>
 6     </div>
 7 
 8     <template id="tmp">
 9         <div>
10             <!-- 在子组件中可调用父组件中的数据 -->
11             <h1>子元素模板---{{parentmsg}}</h1>
12         </div>
13     </template>
14 
15     <script>
16         // 创建模板
17         let com = {
18             template: '#tmp',
19             data() {
20                 return {
21                     msg: "子组件中的数据"
22                 }
23             },
24             methods: {
25                 sendToParent () {
26                     this.$emit('func', this.msg)
27                 },
28             },
29             created() {
30                 this.sendToParent()
31             },
32             props: ["parentmsg"]
33         }
34 
35         // 创建Vue实例
36         let vm = new Vue({
37             el: "#app",
38             data: {
39                 msg: "父组件中的数据",
40                 childMsg: ''
41             },
42             methods: {
43                 getChildMsg (data) {
44                     this.childMsg = data
45                 }
46             },
47             components: {
48                 com
49             }
50         })
51     </script>
52 </body>

 

posted @ 2019-08-10 15:43  山下明明子  阅读(275)  评论(0)  编辑  收藏  举报