vue.js 组件的通讯

使用子组件向父级组件传递数据

<template>
  <div id="App" >
    <!--登录组件 父组件中给子组件定义触发（v-on:后面自定义） v-on:controller-start="ifstart"-->
    <!--ifstart 在父组件中自己定义的函数 -->
    <login v-on:controller-start="ifstart"></login>
    <!--控制面板组件-->
    <controller v-if="startType"></controller>
  </div>
</template>

<script>
import Controller from './components/controller'
import Login from './components/login'
export default {
  components: {
    Login,
    Controller},
  name: 'App',
  // 定义数据对象
  data () {
    return {
      startType: false
    }
  },
  // 定义事件对象 methods
  methods: {
    ifstart: function (msg) {
      console.log(msg)
    }
  }

<template>
<!--设置一个点击触发事件的button 绑定onlogin-->
    <button class="login-btn" v-on:click="onLogin" type="primary" >登录</button> 
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      user: '',
      password: '',
      ifLogin: true,
      loading: false
    }
  },
  methods: {
    // 登录
    onLogin: function () {
      //触发函数 后定义 this.$emit（第一个参数绑定在父组件的定义的v-on:的事件名称, data）
      //第二个参数data 是传递给这个事件的参数
      this.$emit('controller-start', data)
       
    }
  }
}
</script>