HTML界面利用 http-vue-loader.js以组件方式引入vue文件

http-vue-loader这套工具可提供开发者直接在网页环境中载入.VueFile，无需透过nodeJS环境编译，也不需要Build的步骤。在index的mounted中无法访问引入的组件但是在methods通过事件可以操作组件的数据。用法很简单，首先在网页上载入Vue与http-vue-loader，...

梦凝哲雪

4359人浏览 · 2022-07-18 17:19:30

梦凝哲雪 · 2022-07-18 17:19:30 发布

官网

Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件：

http-vue-loader 这套工具可提供开发者直接在网页环境中载入 .Vue File，无需透过 nodeJS 环境编译，也不需要 Build 的步骤。

用法很简单，首先在网页上载入 Vue 与 http-vue-loader，如下

<script src="../js/vue.min.js"></script>
<script src="../js/http-vue-loader.js"></script>

独立的Vue文件

<template>
	<div class="head">{{msg}}</div>
</template>

<script>
	
	// http-vue-loader的示例中，单文件子组件中写的是module.exports = {}，而不是export default {}
	module.exports = {
		// 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
	    data: function() {
	        return {
	            msg: '头部导航栏'
	        }
	    },
		
	}
</script>

<style>
	.head{
		height: 60px;
		line-height: 60px;
		text-align: center;
		background-color: pink;
	}
</style>

主界面引入

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app" @click="show">
			<my-header></my-header>
		</div>
		<script src="../js/vue.min.js"></script>
		<script src="../js/http-vue-loader.js"></script>
		
		<script>
			let app = new Vue({
			    el: '#app',
				/* 引入vue文件作为测 组件  */
			    components: {
			      'MyHeader': httpVueLoader('../components/myhead.vue')
			    },
			    data: function() {
			      return { visible: false }
			    },
				mounted () {
					
					console.log( this.$children.length); // 无法访问  0
					
					this.$nextTick(()=>{
						console.log( app.$children.length  );  // 无法访问 0
					})
				},
				methods : {
					show(){
						console.log( this.$children  ); // Array [ {…} ]
						console.log( app.$children[0].msg  ); // 头部导航栏
						app.$children[0].msg = '公共的Vue组件';
					}
				}
			  });	
		</script>
	</body>
</html>

在index的 mounted 中无法访问引入的组件但是在 methods 通过事件可以操作组件的数据

在这里插入图片描述

点击事件后
在这里插入图片描述

引入方案二

其他vue文件引入第一个第一个组件也可以生效

<template>
    <div class="home">
		<h1>{{msg}}</h1>
        <my-header></my-header>
    </div>
</template>
 
<script>
//引入，相当于import
const header = httpVueLoader('./myhead.vue');
//全局注册
Vue.component('my-header', header);
 
    module.exports = {
        data() {
            return {
               msg : '测试界面2',
            };
        }
    };
</script>
 
<style scoped>
    .home {
        font-size: 24px;
        font-weight: bold;
    }
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^