vue---父調子 $refs (把父元件的資料傳給子元件)子調父 $emit (把子元件的資料傳給父元件)
阿新 • • 發佈:2019-01-01
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>