文章目录
存在问题
- 没有实现全局组件的复用，只能在单一页面做逻辑的拆分
- 传递复杂类型数据到子组件，会出现无法解析语法的问题(解决方案不使用驼峰命名，使用下划线连接可解决)
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.headerCom {
font-size: 24px;
}
.header-com-img {
width: 400px;
height: 400px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
</head>
<body>
<div id="app">
<header-com
:user_info="user_info"
:img_list="img_list"
name="p-name"
:title="title"
/>
</div>
</body>
<!-- 头部组件 -->
<script type="text/html" id="headerCom">
<div class="headerCom">
<h1 class="headerCom-title">{{title}}</h1>
<p>username--{{user_info.username}}</p>
<p>
{{inputVal}}--{{name}}
</p>
<br />
<input type="text" v-model="inputVal" />
<div>
<img
v-for="item in img_list"
:key="item.id"
class="header-com-img"
:src="'http://139.9.210.43:5000'+item.url"
alt=""
/>
</div>
</div>
</script>
<script type="module" src="index.js"></script>
</html>
index.js
import { headerComOptions } from "./components/headerCom.js";
new Vue({
el: "#app",
data() {
return {
title:'header',
img_list : [],
user_info:{
username:'wxj'
}
};
},
components: {
"header-com": headerComOptions,
},
async created() {
let data = await axios.get("http://139.9.210.43:5000/ceshi/imgs", {
params: {
type: "1121",
},
});
// console.log(data.data.data);
this.img_list = data.data.data;
},
methods: {},
});
headerCom.js
/*
* @Description: 如果是全局组件，最好直接导入css;如果只是当前页使用，建议写到具体页面的css中
*/
// // js中引入一个css文件 建议在全局组件中使用
// var css = document.createElement('link');
// css.rel = 'stylesheet';
// css.href = './headerCom.css';
// document.head.appendChild(css);
// 组件的具体逻辑
// let el_template = document.querySelector("#headerCom")?.innerHTML;
let el_template = headerCom?.innerHTML;
// console.log(el_template);
let headerComOptions = {
template: el_template,
props: {
title:'',
user_info:{
type:Object,
},
name: {
type: String,
},
img_list: {
type: Array,
},
},
data() {
return {
inputVal: "1212",
};
},
};
export { headerComOptions };
版权声明：本文为qq_42451776原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。