vue.js组件之间传递数据的方法

// 注册一个子组件
Vue.ponent('child', {
  data: function(){
    text: '我是father的子组件！'
  }
  template: '<span>{{ text }}</span>'
})
// 注册一个父组件
Vue.ponent('father', {
  template: '<div><child></child></div>' // 在模板中使用了child组件
})

<div id="app">
  <father></father>
</div>

Vue.ponent('brother1', {
  template: '<div>我是大哥</div>'
})
Vue.ponent('brother2', {
  template: '<div>我是小弟</div>'
})

<div id="app">
  <brother1></brother1>
  <brother2></brother2>
</div>

<template>
  <div class="app">
    // message 定义在子组件的 props 中
    <child :message="name"></child>
  </div>
</template>
<script>
  import child from './child.vue';
  export default {
    ponents: {
      child
    },
    data() {
      return {
        name: 'linxin'
      }
    }
  }
</script>

<template>
  <span>Hello {{message}}</span>
</template>
<script>
  export default {
    // 在 props 中声明获取父组件的数据通过 message 传过来
    props: ['message']
  }
</script>

export default {
  data(){
    newMessage: null 
  },
  props: ['message'],
  created(){
    this.newMessage = this.message;
  }
}

export default {
  props: ['message'],
  puted{
    newMessage(){
      return this.newMessage + ' 哈哈哈';
    }
  }
}

<template>
  <div class="app">
    // hide 为自定义事件，名字可以自己随便起，不能有大写字母，可以使用短横线
    // @hide 监听子组件触发 hide 事件，则会执行 hideDialog 方法
    <dialog :is-show="show" @hide="hideDialog"></dialog>
    <button @click="showDialog">显示弹框</button>
  </div>
</template>
<script>
  import dialog from './dialog.vue';
  export default {
    ponents: { dialog },
    data() {
      return {
        show: false
      }
    },
    methods: {
      showDialog() {
        this.show = true;
      },
      hideDialog() {
        this.show = false;
      }
    }
  }
</script>

<template>
  <div class="dialog" v-show="isShow">
    <p>这里是弹框子组件</p>
    <button @click="toHide">关闭弹框</button>
  </div>
</template>
<script>
  export default {
    // 驼峰式命名的 prop 需要转换为相对应的短横线隔开式 is-show
    props: ['isShow'],
    methods: {
      toHide(){
        // $emit 方法触发父组件的监听事件
        this.$emit('hide');
      }
    }
  }
</script>