vue—子调父 $emit (把子组件的数据传给父组件)

注意: Hello.vue 子组件     App.vue 父组件   

<!--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', '我是子元素传过来的') // 1、
            }
        }
    }

  

<!--App.vue  :-->
<template>
  <div id="app">
    <hello @newNodeEvent="parentLisen" />  // 4、
  </div>
</template>

<script>
    import hello from './components/Hello' // 2、
    export default {
        name: 'app',
        'components': {
            hello
        },
        methods: {
// 3、子组件传的值 parentLisen(evtValue) { //evtValue 是子组件传过来的值 alert(evtValue) } } } </script>

  

原文地址:https://www.cnblogs.com/sylys/p/13343464.html