Vue常见问题（一）组件的使用

Failed to resolve component.

报错原因：

组件注册错误：我们在组件中使用了未注册的组件。在Vue中，组件必须先注册才能使用。 

解决方法： 

• 引用组件 ：

  import ItemPage from "@/components/itemPage.vue";

• 在组件中定义：

  components: {
    ItemPage
  }

• 使用组件：这里大小写一定要保持一致，不然也会报错。

  <ItemPage></ItemPage>

 

Unknown custom element: <mapItem> - did you register the component correctly? 

报错原因： 

• 组件未注册：你可能没有在你的Vue实例或组件中注册这个自定义组件。
• 注册方式错误：即使你尝试注册了组件，也可能因为使用了错误的注册方式（全局或局部）或者错误的注册时机（在组件实例化之后才注册）。
• 拼写或大小写错误：Vue的组件名是大小写敏感的，如果你的组件名在注册和使用时大小写不一致，也会导致这个错误。
• 异步组件问题：如果你正在使用异步组件，可能在组件被使用之前还没有加载完成。

解决方法： 

定义和使用，注意每个单词不要拼写错误 。

import mapItem from "./components/map.vue";
export default {
  name: "App",
  components: {
    mapItem,
  },
  data() {
    return {};
  },
};

<mapItem></mapItem>

在需要被引用的组件内定义一个name属性：

export default {
  name: "mapItem",
  data() {
    return {
    };
  },
}

  更多使用请参考官网：https://cn.vuejs.org/api/component-instance.html#component-instance  

 

完整的组件使用 

组件

使用模版来动态设置组件的内容，通过props来接收传来的参数。 

<template>
	<view class="input-content">
		<u-form>
			<template v-for="item in formItems" :key="item.name">
				<template v-if="item.type === 'select'">
					<u-form-item :label=item.label label-width="auto" prop="date"><u-input
							v-model="select.current.label" type="select" @click="select.show=true" /></u-form-item>
				</template>
				<template v-else-if="item.type === 'input'">
					<u-form-item :label="item.label" label-width="auto" prop="name"><u-input
							v-model="form.data[item.name]" /></u-form-item>
				</template>
			</template>
		</u-form>
	</view>
</template>
<script>
	export default {
		props: {
			formItems: Array,
			form: Object,
			select: Object
		},
		data() {
			return {
			};
		},
		methods: {
			onSelect() {
				this.$emit('onSelect')
			}
		}
	}
</script>

使用组件的文件

<template>
	<view class="container">
		<!-- 输入区 -->
		<InputContent :form="form" :formItems="formItems" :select="select" @onSelect="onSelect"></InputContent>
	</view>
</template>
<script>
	import InputContent from './components/inputContent.vue'
	export default {
		components: {
			InputContent
		},
		data() {
			return {
				// 输入框内容
				formItems: [{
						type: 'select',
						label: '数据版本',
						name: 'dataVersionId',
						dataVersionId: '', //数据版本
					},
				],
				isTrue: false, //是否展示数据信息
				form: {
					switchVal: false,
					data: {
						dataVersionId: '', //数据版本
						codeTsForm: '', //税号
						ieFlagForm: '' //商品名称
					},
					searchData: {},
				},
				select: {
					show: false,
					current: {},
					list: [],
				},
			};
		}
    }
</script>