原生HTML项目中使用自定义的Vue组件(.vue文件)

最新推荐文章于 2024-08-12 22:54:41 发布

zsd_666

最新推荐文章于 2024-08-12 22:54:41 发布

阅读量217

点赞数 3

分类专栏： Web前端文章标签： vue.js html javascript

本文链接：https://blog.csdn.net/zhao3756/article/details/141127449

版权

Web前端专栏收录该内容

102 篇文章 0 订阅

订阅专栏

原生HTML项目中使用自定义的Vue组件(.vue文件)

－ index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<my-child v-model="test" :num="num2" @change="handleChange"></my-child>
			<div>获取子组件数据： {{ childValue }}</div>
		</div>

		<script src="https://unpkg.com/http-vue-loader@1.4.2/src/httpVueLoader.js"></script>
		<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>

		<script type="text/javascript">
			Vue.use(httpVueLoader)
			Vue.component('my-child', 'url: ./childCom.vue')
			var vm = new Vue({
				el: '#app',
				components: {

				},
				data: {
					test: 100,
					num2: '200',
					childValue: ''
				},
				created() {
				},
				methods: {
					handleChange(val) {
						this.childValue = val
					}
				}
			})
		</script>

	</body>
</html>

子组件 childCom.vue

需要使用module.exports导出组件

<template>
	<div>
		<input type="text" v-model="val" @input="handleInput" />
	</div>
</template>

<script>
	module.exports = {
		props: ['num'],
		data() {
			return {
				val: ''
			}
		},
		created() {
			if (this.$attrs.value) {
				this.val = this.$attrs.value
			}
		},
		mounted() {
			console.log(this.num)
		},
		methods: {
			handleInput() {
				this.$emit('change', this.val)
			}
		}
	}
</script>

<style>
</style>