vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件...

Home.vue

 1 <template>
 2     
 3     <div id="home">
 4     
 5         <v-header :title="title" :homemsg='msg'  :run="run"  :home="this">v-header>
 6 
 7         <hr>
 8          首页组件   
 9 
10     div>
11 
12 template>
13 
14 
15 <script>
16 
17 
18 /*
19 父组件给子组件传值
20 
21     1.父组件调用子组件的时候 绑定动态属性
22         
23 
24     2、在子组件里面通过 props接收父组件传过来的数据
25 
26 
27 
28 
29 
30 */
31 
32     import Header from './Header.vue';
33 
34     export default{
35         data(){
36             return {               
37                msg:'我是一个home组件',
38                title:'首页111'
39             }
40         },
41         components:{
42 
43             'v-header':Header
44         },
45         methods:{
46 
47             run(data){
48 
49                 alert('我是Home组件的run方法'+data);
50             }
51         }
52 
53 
54     }
55 
56 script>
57 
58 <style lang="scss" scoped>
59 
60     /*css  局部作用域  scoped*/
61 
62     h2{
63 
64         color:red
65     }
66 
67     
68 style>

Header.vue

 1 <template>
 2 
 3 
 4     <div>
 5     
 6         <h2>我是头部组件--{{title}}---{{homemsg}}h2>
 7 
 8         <button @click="run('123')">执行父组件的方法button>
 9 
10         <br />
11         <br />
12         
13         <button @click="getParent()">获取父组件的数据和方法button>
14 
15        
16     div>
17 template>
18 
19 
20 
21 
22 <script>
23     
24 export default{
25 
26 
27     data(){
28 
29         return{
30             msg:'子组件的msg'
31         }
32     },
33     methods:{
34         getParent(){
35             // alert(this.title)
36 
37 
38 
39             // alert(this.home.title)
40 
41 
42             this.home.run()
43 
44         }
45 
46     },
47     props:['title','homemsg','run','home']
48     
49 }
50 
51 script>

 

转载于:https://www.cnblogs.com/Spinoza/p/10018924.html