Vue中局部组件

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
 
        <child-component></child-component>
    </div>
    <template id="chrent">
        <div>
            这是一个子组件{{msg}}
        </div>
    </template>
    <script src="vue.js"></script>
    <script>
        var vm=new Vue({
            el:'#app',
            data:{
                message:'Hello Vue.js!'
            },
            components:{
                'child-component':{
                    template:chrent,
                    data:function(){
                        return{
                            msg:'I am a child component.'
                        }
                    }
                }
            }
 
        })
    </script>
</body>
</html>

posted @ 2024-09-12 14:41 一个人走在路上阅读(6) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue中的全局组件

· Vue中简单的组件，登录和注册切换

· 3.Vue系列组件化开发

· vue父子组件

· Vue局部组件的定义

阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！

公告

记录学习、用在实际，一路前行......

昵称：一个人走在路上
园龄： 2年6个月
粉丝： 0
关注： 5

+加关注

2025年3月

日

一

二

三

四

五

六

zy8899

从0到1，一步一步的走.....

Vue中局部组件

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<div id="app">

	<child-component></child-component>
	</div>
	<template id="chrent">
	<div>
	这是一个子组件{{msg}}
	</div>
	</template>
	<script src="vue.js"></script>
	<script>
	var vm=new Vue({
	el:'#app',
	data:{
	message:'Hello Vue.js!'
	},
	components:{
	'child-component':{
	template:chrent,
	data:function(){
	return{
	msg:'I am a child component.'
	}
	}
	}
	}

	})
	</script>
	</body>
	</html>