vue之自定义组件以及插槽slot的使用

一、在src文件夹下components文件夹中创建文件夹componentsViews（放置所有自定义组件）

//在main.js引入
import componentsViews from '@/components/componentsViews/index.js'
Vue.use(componentsViews)

二、form是我的自定义组件

<template>
  <div>
    <p>这是我的子组件</p>
	//titleSlot是插槽名字
    <slot name="titleSlot" :title="title"> </slot>
  </div>
</template>
<script>
	export default {
	  props: [],
	  data() {
		return {
		  title:'我是子组件的插槽'
		}
	  },
	  methods: {},
	}
</script>

三、index.js是让自定义组件可以全局使用的配置文件

// index.js
import form from './form'//引入组件

import JEditableTable from '@/components/jeecg/JEditableTable'//组件库（可引入自己使用的）
import { JVXETypes } from '@/components/jeecg/JVxeTable'//组件库的配置（可引入自己使用的）


const Component = {
  install: (Vue) => {
    Vue.prototype.$JVXETypes = JVXETypes;//组件库的配置（可引入自己使用的）
    Vue.component('form-components', form)
    Vue.component('JEditableTable', JEditableTable)
  }
}
export default Component
</script>

三、在父页面使用

<template>
  <div>
    <form-components>
		<p>我是父页面</p>
		//titleSlot是插槽名字
		<template slot="titleSlot" scope="formData">
			{{formData.title}}
		</template>

	</form-components>
    
  </div>
</template>
<script>
	export default {
	  props: [],
	  data() {
		return {
		  title:'我是子组件的插槽'
		}
	  },
	  methods: {},
	}
</script>