Vue模板内使用模板

Question

在使用react的时候，构建复杂应用的时候，可以将页面组件化。
例如

<App>
    <Nav>
        <Icon></Icon>
        <SpaneList></SpaneList>
    </Nav>
    <Content></Content>
    <Footer></Footer>
<App>

每一个自定义标签，对应一个Component，事件分发和各自的state与props管理，能保证父子组件的独立和通讯。
在vue中组件不是一个物理概念，而是一个逻辑概念，一个vue对象对应了一个组件的M与C的部分，V的部分则由模板来负责，那么在Vue中，构建相互包含且引用层次较深的组件组合，最佳实践是什么？或者说，vue中怎么解决模板项目包含引用，组件独立于相互通讯？

Answer 1

从你问题的描述来看，你应该只看了 Vue 实例部分的文档吧？至少看到单文件组件再回过头来看看你自己的问题你可能会有新的收获。

组件概念及用法直接看官方文档即可，Vue 属于 MVVM 框架，Vue 自身实现了 VM，Vue 实例对象是 M，模板构成 V（这些概念不了解、不进行对应不会影响学习和使用 Vue）。

组件间通讯支持父子组件之间通过 props 和 自定义事件 进行数据传递和事件响应，组件间通讯还可以通过 event bus 和 vuex 实现非父子组件间的状态共享和状态修改，后者参见 vuex 文档。

单文件组件必须依赖于 webpack 使用 vue-loader 加载器进行加载，必然需要使用 require 或 import。

React 的 jsx 也是需要使用 import 的吧？

React 采用 JS 的方法通过 this.props.children 处理组件标签内部的子组件，而 Vue 和 Angular 采用
HTML 模板标签的方式，只是方式不同，本质上并无差异吧。

至于单向数据流，Vue 做出这样的限制主要是考虑数据避免状态的任意修改导致调试时追踪困难，如果不需要这样的特性，一个最简单的办法是给子组件的 prop 传递一个对象，然后在子组件中任意修改对象的属性。