在 vue2 项目中 必须需要一个 根元素<div></div>包裹
div包裹时候会多一个dom元素 当您不想用一个无用的容器污染DOM，或者您想一次返回许多元素时，可以用 Vue-fragment
Vue-fragment 在组件使用的时候是以 <fragment> </fragment>标签使用
当在也页面的时候会被注释
下载
npm i -s vue-fragment
在main全局配置
import Fragment from 'vue-fragment'
Vue.use(Fragment.Plugin)
// or
import { Plugin } from 'vue-fragment'
Vue.use(Plugin)
// …
export const MyComponent {
template: '
<fragment>
<input type="text" v-model="message">
<span>{{ message }}</span>
</fragment>
',
data() { return { message: 'hello world }}
}
在组件引入并使用
import { Fragment } from 'vue-fragment'
export const MyComponent {
components: { Fragment },
template: '
<fragment>
<input type="text" v-model="message">
<span>{{ message }}</span>
</fragment>
',
data() { return { message: 'hello world }}
}
[官网]（https://www.npmjs.com/package/vue-fragment）
注意
对于路由组件的根组件，切换时 由于本身是代码片段，所有无法使用parent.removeChild,insterBefore 等方法
可以使用在子组件内部（路由根组件有问题）
