子组件向父组件传值 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>Title</title>
 7     <script src="./public/lib/vue/dist/vue.js"></script>
 8 </head>
 9 
10 <body>
11     <div id="app">
12         <!-- 父组件向子组件传递放方法，使用的是事件绑定机制； v-on ,当我们自定义了一个事件属性之后，那么
13         子组件就能够，通过某些方式来调用传递进去的这个方法了 -->
14         <com2 @func="show"></com2>
15     </div>
16 
17 
18     <template id="chi">
19         <div>
20             这是子组件
21             <input type="button" value="这是子组件中的按钮" @click="chiclick">
22         </div>
23     </template>
24 
25 
26 
27     <script>
28         var com1 = {
29             data: function () {
30                 return {
31                     sonmsg: { name: '小头儿子', age: 6 }
32                 }
33             },
34             template: '#chi',
35             methods: {
36                 chiclick() {
37                     // 当点击子组件的按钮的时候,如何拿到父组件传递过来的方法
38                     this.$emit('func', this.sonmsg);
39                 }
40             },
41             // 把父属性传递过来的parentmsg属性，先在props数组中定义一下，
42             // 这样才能使用这个数据
43         }
44 
45         new Vue({
46             el: '#app',
47             data: {
48                 Fromson: null
49             },
50             methods: {
51                 show(par) {
52                     // alert("hello 我是父组件" + par);
53                     console.log(par);
54                     this.Fromson = par;
55                 }
56             },
57             components: {
58                 com2 : com1
59             }
60         })
61     </script>
62 </body>
63 
64 </html>

 

posted @ 2019-09-15 14:40  normalboy(NB)  阅读(220)  评论(0)    收藏  举报