VUE 父子组件传值

Vue.js学习笔记：props传递数据

一.传递数据

1.props 传入单数据
就像 data 一样，prop 可以用在模板内,同样也可以在 vm 实例中像“this.message”这样使用

<template>
  <div id="app">
      <h1>{{title}}</h1>
      <child :message="hello!  Prop"></child>
  </div>
</template>
<script> 
import Vue from 'vue';
Vue.component('child', {
  // 声明 props
  props: ['message'],
  template: '<span>{{ message }}</span>'
})
export default {
  name: 'app',
  data: function () {
    return { 
      title: '使用 Prop 传递数据'
    } 
  }
}
</script>
<child message="hello!  Prop"></child>