vue中的子组件和父组件如何理解

Question

在深入内容分发 API 之前，我们先明确内容的编译作用域。假定模板为：

<child-component>{{ message }}</child-component>

message 应该绑定到父组件的数据，还是绑定到子组件的数据？答案是父组件。组件作用域简单地说是：

父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法：

<!-- 无效 --><child-component v-show="someChildProperty"></child-component>

假定 someChildProperty 是子组件的属性，上例不会如预期那样工作。父组件模板不应该知道子组件的状态。

如果要绑定子组件内的指令到一个组件的根节点，应当在它的模板内这么做：

Vue.component('child-component', { // 有效，因为是在正确的作用域内template: '<div v-show="someChildProperty">Child</div>',data: function () {return {someChildProperty: true}}})

类似地，分发内容是在父组件作用域内编译。

上面这段话给我看的有点晕，父组件到底是

<child-component>{{ message }}</child-component>

这个呢？还是new vue时候的包含child-component的元素

Answer 1

是这个new Vue,只是说明message是父组件的属性，而且这样写，子组件child-component要使用插槽slot