vue自定义组件步骤

写 装 引 用

一、components 文件下新建文件夹test test.vue文件和test.js文件

test.vue 文件中

<template>
	 <div>
	    <div>{{msg}}</div>
	  </div>
</template>

<script>
	export default{
		data(){
			return{
				msg:"hello word"
			}
		},
		
		components:{}
	}
</script>
<style>
</style>

test.js 文件中

import MyTest from './test.vue'
const Test = {
  install (Vue) {
    Vue.component('Test', MyTest)
  }
}
export default Test

二、入口文件main.js引入

import Test from './components/test'
Vue.use(Test)

三、使用该组件

<template>
	  <div class="helloword">
	      <Test> </Test>
	  </div>
	</template>