关于vue，为什么把数据写在子组件上了仍然要通过prop来传递数据？

Question

还有一些疑问：1.在这个例子里哪个是父组件，哪个是子组件。

1. Vue.component('blog-post', { }和<blog-post></blog-post>是什么关系。

  <div id="example">
    <blog-post title='vue'></blog-post>
  </div>

<script>
Vue.component('blog-post', {
  props:['title'],
  data(){
    return {
    }
  },
  template: '<h3>{{ title }}</h3>'
})

new Vue({
  el:'#example',

})

感谢解答的大佬们

Answer 1

1、props的问题：子组件中的props声明了哪些属性需要被监听/内部使用，我们在父组件中调用子组件的时候，为子组件添加了一堆的属性值，但不是每一个属性我们都需要在子组件中用到，而props的作用就是告诉vue哪些属性我们需要用到，然后vue会对他进行数据监听

2、Vue.component('blog-post', { })和<blog-post></blog-post>的关系上面的回答已经讲了，一个是具体内容，一个是调用方式

3、父组件是<div id="example">，子组件是<blog-post></blog-post>，而Vue.component('blog-post', { })是子组件的具体内容，或者说是实现

Answer 2

Vue.component('blog-post',...)是注册了一个全局组件，<blog-post></blog-post>是使用了这个组件。

父组件是
new Vue({
el:'#example',

})
子组件是
<blog-post></blog-post>

Answer 3

实际应用通过导入组件来注册，通过props传递到子组件