1. 程式人生 > >vue---父調子 $refs (把父元件的資料傳給子元件)子調父 $emit (把子元件的資料傳給父元件)

vue---父調子 $refs (把父元件的資料傳給子元件)子調父 $emit (把子元件的資料傳給父元件)

ps:App.vue 父元件
  Hello.vue 子元件
 

App.vue  :

<template>
<div id="app">
<input type="button" name="" id="" @click="parentCall" value="父調子" />

<hello ref="chil" />

</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>
</div>
</template>

<script>
export default {
name: 'hello',
'methods': {

  chilFn (msg) {
    alert(msg)
  }


}
}
</script>

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>