vue新手，遇到了问题，这段代码为什么会报错？

Question

我是根据官方的栗子来学的
报了这个错：

html:

<div id="app-test1">
    <app-title></app-title>
    <app-content></app-content>
</div>

js:

Vue.component('app-title',{
    template: '<h3>{{ title }}</h3>'
});
Vue.component('app-content',{
    template: '<p>{{ content }}</p>'
});

var appTest1 = new Vue({
    el: '#app-test1',
    data: {
        title: '这是组件',
        content: '这是组件这是组件这是组件这是组件这是组件这是组件这是组件这是组件'
    }
});

Answer 1

并不是data造成的，写组件时data应该才是function吧。
因为你写的是两个组件，所以父组件与子组件之间的参数传递应该要靠props，，因此需要在子组件内加入props属性，并且在html里加入v-bind。所以代码如下：

<div id="app-test1">
    <app-title :title='title'></app-title>
    <app-content :content='content'></app-content>
</div>

Vue.component('app-title',{
    template: '<h3>{{ title }}</h3>',
    props: {
      title: {
        type: String
      }
    }
});
Vue.component('app-content',{
    template: '<p>{{ content }}</p>',
    props: {
    content: {
      type: String
      }
    }
});

var appTest1 = new Vue({
    el: '#app-test1',
    data: {
            title: '这是组件',
            content: '这是组件这是组件这是组件这是组件这是组件这是组件这是组件这是组件'
    }
});

Answer 2

楼上几位答非所问， 那是子组件访问不了父组件属性。 想要访问父组件属性要加 props去接收父组件属性来进行通信。

Answer 3

title,header,footer等属于关键字.建议更换一下.另外-最好使用_代替或者使用驼峰命名法.

Answer 4

data应该这样写

data () {
  return {
    title: '这是组件'
    ...
  }
}

Answer 5

已解决，谢谢大家的建议

Answer 6

没理解问题，答非所问了