vue中的父子组件调用

1.把子组件的数据传给父组件

App.vue 父组件　 Hello.vue 子组件  $emit

import hello from './components/Hello'

export default {

  name: 'app',

  'components': {

    hello

  },

  methods: {

    parentLisen(evtValue) {

      alert(evtValue) //evtValue 是子组件传过来的值

   }

 }

}

export default {

  name: 'hello',

  'methods': {

    chilCall(pars) {

       this.$emit('newNodeEvent', '我是子元素传过来的')

    }

  }

}

2.把父组件的数据传给子组件

App.vue 父组件　 Hello.vue 子组件  props

<template>

  <hello :options="message"></hello>  //把父组件的数据传给子组件

</template>

import hello from './components/Hello'

export default {

  name: 'app',

  'components': {

    hello

  },

 data() {

    return {

      message: '123'

   }

 }

}

<template>

  <div>{{options}}</div>

</template>

export default {

   name: 'hello',

   props: ['options'],  //props传递

  }