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