Vue组件

最新推荐文章于 2025-03-09 10:09:01 发布

11adaacc

最新推荐文章于 2025-03-09 10:09:01 发布

阅读量172

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/Rayshaan/article/details/113360221

版权

Vue组件 slot插槽动态组件前端模块化工程化

关键词由优快云通过智能技术生成

vue 专栏收录该内容

15 篇文章

订阅专栏

文章目录

01.组件的基本使用

组件：前端模块化、工程化的基础。把前端页面分成一个一个的小模块。这些小模块就称为组件

组件使用：

使用占位符英文即可。不能和标签名字一致，一般需要有语义
定义组件 let 组件名=Vue.extend({})
定义模板书写所要渲染的标签
挂载组件相当于把模板和组件联系起来

	<body>
		<div id="app">
		<!-- 占位符 -->
			<v-header></v-header>
			<v-nav></v-nav>
		</div>
		<script src="js/vue.js"></script>
		<script>
			var vheader=Vue.extend({
				// 定义模板
				template:'<h1 @click="change()">{{msg}}</h1>',
				// 组件内部有自己的数据，必须使用函数的形式表示
				data(){
					return {
						msg:'这是头部'
					}
				},
				methods:{
					change(){
						this.msg+=1;
					}
				}

			})
			var vnav=Vue.extend({
				template:'<h1>这是导航</h1>'
			})
			new Vue({
				el:'#app',
				//挂载组件
				components:{
					'v-header':vheader,
					'v-nav':vnav
				}
			})
		</script>
	</body>

在这里插入图片描述

定义组件的第二种方式：去掉Vue.extend()

var vnav={
	template:'<h1>这是导航</h1>'
}

定义组件的第三种(最常用)方式：

<body>
    <div id="app">
    <!--占位符-->
        <v-head></v-head>
        <v-body></v-body>
    </div>    
    <template id="head">
    <!--定义模板-->
        <div id="box">
            <h1>标题</h1>
            <p>{{msg}}</p>
        </div>
    </template>
    <template id="body">
        <div id="con">
            <div>
                <p>内容</p>
            </div>
        </div>
    </template>
    <script src="js/vue.js"></script>
    <script>
    //定义组件
        let vhead={
        //模板已经定义好，可以直接使用id名
            template:'#head',
            data(){
                return {
                    msg:'这是一个标题'
                }
            }
        }
        let vbody={
            template:'#body'
        }
        new Vue({
            el:"#app",
            //挂载组件
            components:{
                'v-head':vhead,
                'v-body':vbody
            }
        })
    </script>
</body>

在这里插入图片描述

注意事项：

定义模板的时候需要使用template包裹
template内部只能有一个根元素

02.slot

slot插槽：在模板中保留位置，使用的时候可以根据具体情况扩展
slot标签需要取name值，占位符需要取slot值，两值必须相等

slot应用：渲染不同的内容

<body>
    <div id="app">
    	 <!--不同的标题使用一个模板渲染-->
    	 <!-- v-head里slot="值"要和template里name="值"相等  -->
        <v-head>
            <h2 slot="title">首页</h2>
        </v-head>
        <v-head>
            <h2 slot="title">推荐</h2>
            <span slot="tuijian">推荐新闻</span>
        </v-head>
        <v-head>
            <h2 slot="title">新闻</h2>
        </v-head>
        <v-head>
            <h2 slot="title">娱乐</h2>
        </v-head>
    </div>
    <template id="head">
        <main>
            <slot name="title"></slot>
            <span>logo</span>
            <!--扩展一段内容-->
            <slot name="tuijian"></slot>
            <span>签到</span>
            <span>菜单</span>
        </main>
    </template>

    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            components:{
                'v-head':{
                    template:'#head'
                }
            }
        })
    </script>
</body>

在这里插入图片描述

03.动态组件

应用：分类页面

<body>
	<div id="app">
		<ul>
			<li @click="msg='woman'" :class="{current:msg=='woman'}">女装</li>
			<li @click="msg='man'" :class="{current:msg=='man'}">男装</li>
		</ul>
		<component :is="msg"></component>
	</div>
	<template id="woman">
		<h1>这是女装</h1>
	</template>
	<template id="man">
		<h1>这是男装</h1>
	</template>
	<script src="js/vue.js"></script>
	<script>
		new Vue({
			el:"#app",
			data:{
				msg:'woman'
			},
			components:{
				'woman':{
					template:'#woman'
				},
				'man':{
					template:'#man'
				}
			}
		})
	</script>
</body>