1、使用this.$parent.event直接调用
 
//父组件
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      father() {
        console.log('提交');
      }
    }
  };
</script>

//子组件
<template>
  <div>
    <button @click="submit()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      submit() {
        this.$parent.father();
      }
    }
  };
</script>
 
2、通过$emit触发一个事件，父组件监听
 
//父组件
<template>
  <div>
    <child @father="father"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      father() {
        console.log('提交');
      }
    }
  };
</script>

//子组件
<template>
  <div>
    <button @click="submit()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      submit() {
        this.$emit('father');
      }
    }
  };
</script>
 
3、使用props
 
//父组件
<template>
  <div>
    <child :father="father"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      father() {
        console.log('提交');
      }
    }
  };
</script>

//子组件
<template>
  <div>
    <button @click="submit()">点击</button>
  </div>
</template>
<script>
  export default {
  	props: {
      father: {
        type: Function,
        default: null
      }
    },
    methods: {
      submit() {
        this.father()
      }
    }
  };
</script>
 
三种区别： 三种都可以实现子组件调用父组件的方法，但是效率有所不同
 
this.$parent.event可以调用父组件身上的方法，无需绑定在子组件身上。缺点：有时候会失效，暂未发现触发点，不建议使用。
 $emit可以调用父组件在子组件身上自定义的事件，需要用@前缀。建议使用此种方式
 props可以调用父组件绑定在子组件身上的事件，需要：前缀。在router-view身上使用失效

 
这篇文章是搬运：https://www.cnblogs.com/jin-zhe/p/9523782.html#commentform 如果想看原版请前往这个网址，谢谢
 这篇文章中介绍了三种方法分别为：
 

 

  
 
 

1、子组件通过使用this.emit('xxx') (xxx：是你要调用的方法名，只要方法名不要后面的小括号)
3、父组件把方法名传给子组件，在子组件里调用这个方法
 代码如下：
 1、子组件通过使用this.$http://parent.xxx
父组件代码：
 

  
<
 
 
子组件代码：
 

  
<
 
 
2、子组件通过使用this.$emit('xxx')
 
父组件代码：
 

  
<
 
 
子组件代码：
 

  
<
 
 
3、父组件把方法名传给子组件，在子组件里调用这个方法
 
父组件代码：
 

  
<
 
 
子组件代码：
 

  
<
 
 

PS：三种方法，只有第一种方法是在路由下使用，使用时可以不用在父组件中间写 “<child></child>” 、 “import child from '~/components/dam/child';” 和 “components: {child },” ，第一个“<child></child>”可以直接不用写，后面两个在使用路由情况下，会在路由里上；
后面两种方法在使用路由情况下未能触发父组件的方法（也许是我写的方法不对，大家直接可以尝试一下）。
还有就是“<child></child>”这个不是标准的标签，同时它也是子组件的名字，也就是 child.vue （解释的不够标准，请见谅！）
 注：如果有写的不对的地方或者侵犯版权请及时给我留言，我会第一时间更改或删除，谢谢！
作者：我常常问自己我是谁
链接：https://www.jianshu.com/p/3fa290218264
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Vue中子组件需要使用父组件的值
 
父组件：
 
// 引入子组件
<children :id="value"></children >
//value在data中定义
<script>
  import children from './children '
  export default {
    data () {
      return{
        value: '1',
      }
    },
    components: {
         children 
    },
  }
</script>
 
子组件：
 
// 在props中声明即可
<script>
  export default {
      props: ['id'],
}
 
此时子组件可直接使用id属性，值为父组件中的value
 
如果对你有帮助麻烦点个赞谢谢~

如下的效果，input控件是子组件。
 
 
父组件调用子组件的值
 
首先input的值是个变量，需要在子组件的data中定义声明变量value值。
 
input子组件：
 
<script>
export default {
  name: 'Input',
  data () {
    return {
      value: ''
    }
  }
}
</script>
 
其次给input子组件做进行双向绑定（v-model="value"，value指在data中声明的变量）
 
<input class="input" type="text" v-model="value" />
 
调用子组件：（访问子组件实例或子元素，通过 ref 特性为这个子组件赋予一个 ID 引用）
 
<login-input ref="numberInput"></login-input>
 
获取input子组件的值
 
console.log(this.$refs.numberInput.value)
 
整体代码如下：
 
Input.vue
 
<template>
  <div>
    <input class="input" type="text" :placeholder="placeholder" v-model="value" />
  </div>
</template>

<script>
export default {
  name: 'Input',
  props: {
    placeholder: String
  },
  data () {
    return {
      value: ''
    }
  }
}
</script>
 
login.vue
 
<template>
  <div>
    <login-input placeholder="请输入账号" ref="numberInput"></login-input>
    <login-input placeholder="请输入密码" ref="passwordInput"></login-input>
  </div>
</template>

<script>
import LoginInput from './components/Input'
export default {
  name: 'Login',
  components: {
    LoginInput
  },
  methods: {
    loginSystem () {
      console.log(this.$refs.numberInput.value + '\n' + this.$refs.passwordInput.value)
    }
  }
}
</script>