vue-fragment插件的使用

在 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 等方法

可以使用在子组件内部（路由根组件有问题）