vue3之插槽可与组件混用

最新推荐文章于 2023-06-02 18:05:24 发布

默默努力的小老弟

最新推荐文章于 2023-06-02 18:05:24 发布

阅读量184

点赞数

文章标签： vue.js 前端 html5

本文链接：https://blog.csdn.net/weixin_47039303/article/details/121543671

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
			
		<lk>{{msg}}</lk>
			
	
	</div>

	<template id="Box">
		xxxxxxxxxx
		<slot></slot>
		<!-- 这个插槽事实上给{{msg}}预留了位置 -->


	</template>





</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
	const box={
		data(){
			return {
				msg:'1111'
			};
		},
		template:'#Box'

	}

	const app=Vue.createApp({
       data(){
       		return {
				msg:"father"
			}
       },
       components:{
       	'lk':box,
       },
       methods:{
       	 clickComponent(){
       	 	console.log(this.$refs.ngs.msg);
       	 }
       }

	}).mount("#app");


</script>
</html>

默默努力的小老弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3之插槽可与组件混用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <lk>{{msg}}</lk> </div> <template id="Box">
复制链接

扫一扫