Vue-组件通信

说明：示例中的子组件都已经在main.js中注册成了全局组件；在使用时直接使用<ChildrenOne />

//入口文件 main.js
import ChildrenOne from '@/components/component/ChildrenOne'
Vue.component('ChildrenOne',ChildrenOne);

一、父传子

父组件向子组件传值使用 props

//父组件
<template>
  <div class="hello">
    <ChildrenOne :msg="message" />
  </div>
</template>

<script>
  export default {
    name: 'Index',
    data () {
      return {
        message: '11111'
      }
    }
  }
</script>

//子组件
<template>
  <h2>{{msg}}</h2>
</template>

<script>
  export default {
    name: "ChildrenOne",
    props: ['msg']
  }
</script>

待续……

二、子传父

三、兄弟组件传值