原创：Vue自定义组件及自定义组件基本用法
其实自定义组件就是自定义标签。每个标签代表一个组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>chapter 07章节学习测试</title>
<!--必须要引入-->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>
{{msg}}22
</h3>
<hr />
<my-component></my-component>
<p>再使用一次自定定义组件</p>
<my-component></my-component>
</div>
</body>
</html>
<script type="text/javascript">
Vue.component('my-component', {
template: `<div class="comDiv">
<h3>{{msg}}</h3>
<h3>{{msg2}}</h3>
<p>这是组件的内容</p>
<p>这是组件的内容22</p>
</div>`,
//自定义组件中data不同于new Vue()实例
//以函数形式,并且用return返回
data:function(){
return{
msg:'**子组件的内容',
msg2:'**子组件内容22'
}
}
})
var app = new Vue({
el: '#app',
data: {
msg: '组件详解学习',
mycom:{
title:'自定义组件名称',
comtent:'自定义组件内容'
}
}
})
</script>
<style type="text/css">
.comDiv{
background: pink;
width:50%;
}
</style>
做产品的程序，才是好的程序员！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！