vue.js $refs和$emit 父子组件交互

<strong>父调子 $refs (把父组件的数据传给子组件) </strong><br><br><template>
     <div id= "app" >
         <input type= "button"  name= ""  id= ""  @click= "parentCall"  value= "父调子"  />
         <hello ref= "chil"  /> //hello组件
     </div>
</template>
 
<script>
     import  hello from  './components/Hello'
     export  default  {
         name:  'app' ,
         'components' : {
             hello
         },
         methods: {
          parentCall () {
             this .$refs.chil.chilFn( '我是父元素传过来的' )
          }
         }
     }
</script>
 
/*Hello.vue  :*/
 
<template>
     <div  class = "hello" ></div>
</template>
 
<script>
     export  default  {
         name:  'hello' ,
         'methods' : {
         chilFn (msg) {
         alert(msg)
        }
         }
     }
</script>

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<strong>子调父 $emit (把子组件的数据传给父组件)</strong>
 
ps:App.vue 父组件
  Hello.vue 子组件
  
 
<!--App.vue  :-->
 
<template>
  <div id= "app" >
    <hello @newNodeEvent= "parentLisen"  />
  </div>
</template>
 
<script>
     import  hello from  './components/Hello'
     export  default  {
         name:  'app' ,
         'components' : {
             hello
         },
         methods: {
             parentLisen(evtValue) {   
                 //evtValue 是子组件传过来的值
                 alert(evtValue)
             }
         }
     }
</script>
 
 
<!--Hello.vue  :-->
 
<template>
  <div  class = "hello" >
    <input type= "button"  name= ""  id= ""  @click= "chilCall()"  value= "子调父"  />
  </div>
</template>
 
<script>
     export  default  {
         name:  'hello' ,
         'methods' : {
             chilCall(pars) {
                 this .$emit( 'newNodeEvent' '我是子元素传过来的' )
             }
         }
     }
</script>

原文链接:https://www.cnblogs.com/axl234/p/7797247.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值