vue的局部组件如何使用

最新推荐文章于 2024-12-24 18:19:03 发布

dingdang_666888

最新推荐文章于 2024-12-24 18:19:03 发布

阅读量535

点赞数

CC 4.0 BY-SA版权

文章标签： Vue局部组件使用

本文链接：https://blog.youkuaiyun.com/lixiaoyan_star/article/details/88974356

vue的局部组件使用，需要先声明一个组件，然后挂载到全局组件的components,再使用。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="node_modules/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
               <Vheader/>
		</div>
        <script type="text/javascript">
           var Vheader={
             template:`
             <div @click="handerFn">头部</div>
             `,
             data(){
                 return{

                 }
             },
             methods:{
                handerFn(){
                    alert("123")
                }
             }
           }
			var vm=new Vue({
				el:"#app",
				data(){
					return{
						

					}
				},
				methods:{
					
					
				},
                components:{
                    Vheader
                }
			})
		</script>
	</body>
</html>