这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战
前言
今天我们来讲一讲vue中的组件，组件是vue的重中之重，毕竟组件化开发的时代，怎么能不了解组件呢，大家一起来看一看吧。
一、什么是组件
组件的出现就是为了拆分Vue实例的代码量,能够让我们以不同的组件.来划分不同的功能模块,需要什么功能,就调用相应的功能模块
二、组件使用
1.创建组件模板
(1.1)template模板不能创建在容器中
<!-- template最好不要在容器里面 -->
<template id="login">
<!--template的根容器只能有一个 -->
<div>
<h1 v-text="kh" @click="say()"></h1>
<!-- 绑定 -->
<h1 @click="$emit('hong',1,2,3,4)">点击我调用父亲方法</h1>
<h1 @click="$emit('dier',1,2,3,4)">点击我调用第二份父亲方法</h1>
</div>
</template>
2.组件注册
组件约等于实例，在实例中声明则是局部组件，这个组件只能在这个实例中使用
//进行定义组件 局部组件
components:{
//定义时候驼峰,使用时变-
'login':{
//这里绑的是组件模板中的id
template:'#login',
//绑定父组件传来的值 -->这里定义的对应vm实例中的<login :kh='msg' ref="first"></login>
//即组件想要调用实例的data属性使用这个
props:['kh'],
data() {
return {
msg:111
}
},
methods:{
say(){
alert(11111)
},
sonfun(){
alert('我是儿子方法')
}
}
},
'regist':{
template:'#regist',
data() {
return {
msg:222
}
},
methods:{
say(){
alert("我是子组件")
}
}
}
}
三、组件切换
(1)v-if (2)v-show (3)component :is 组件切换的三种方法
（3.1）v-if进行隐藏显示
<!-- 通过v-if进行隐藏显示 -->
<login v-if='flag'></login>
<regist v-else></regist>
<button type="button" @mouseover="flag=true" @mouseout='flag=false'>钱钱钱</button>
（3.2)component :is进行切换
<!-- mode in-out先进后出 out-in先出后进 -->
<transition appear mode='out-in'>
<!-- :is后面跟的是vm变量,通过vm变量的来指定组件 -->
<component :is="jilin"></component>
</transition>
(3.3)vmjs代码示例
window.vm=new Vue({
el:'#app',
data:{
flag:false,
jilin:'login'
},
//进行定义组件
components:{
'login':{
template:'#login',
props:['kh'],
}
})
四、父子组件互相使用传值
组件和实例之间是有独立的作用域 组件的方法和变量在实例中是不能用的,反之亦可
(4.1)父类(vm)调用子组件的方法(children)(children)(refs）
组件要用实例的参数或者要调用实例的方法组件时以标签的形式进行复用
(1)父亲调用儿子,必须先拿到儿子的句柄 $children
根据句柄来调用方法根据数组存储,缺点是多组件的情况下不灵活
(2)通过$ref来获取子组件
根据json对象的格式来存储
(4.1.1) 前端两种调用方式代码示例(父亲调用儿子方法)
<!--sonfun是组件内定义的方法 -->
<h1 @click='$children[0].sonfun()'>点击调用儿子1</h1>
<h1 @click='$refs.first.sonfun()'>点击调用儿子</h1>
-------------------------------------------------------------------------------------
<!--使用ref需要先定义ref属性，之后使用$refs的时候就通过这个Key进行查找 -->
<login :kh='msg' ref="first"></login>
<login :kh='msg' ref="second"></login>
(4.1.2) js中的定义
'login':{
template:'#login',
methods:{
son(){ alert('我是儿子方法')}
} }
(4.2)子组件调用父类(vm)的方法($emit) --同时父类通过这个调用儿子方法
(4.2.1)模板定义与调用前端代码示例
通过在父类绑定自定义事件,再由$emit进行绑定点击事件之类的
<!-- 子组件调用vm -->
<div id="app">
<login :kh='msg' ref="second" @hong='fater' @dier='fater2'></login>
</div>
-------------------------------------------------------------------------------
<template id="login">
<div>
<!-- 绑定容器中绑定的事件 -->
<h1 @click="$emit('hong',1,2,3,4)">惦记我调用父亲方法</h1>
<h1 @click="$emit('dier',1,2,3,4)">惦记我调用第二份父亲方法</h1>
</div>
</template>
(4.2.2)js部分代码示例
window.vm=new Vue({
//父类方法
methods: {
fater(...son){
alert("我是父亲"+son);
},
fater2(...son){
alert("我是第二份父亲"+son);
},
},
//组件注册
components:{
'login':{ xxxx }
},
})
(4.3)子组件使用父类(vm)的data值(props)
(4.3.1)前端代码示例
:kh='msg' 其中msg是父类中的data值
<!-- :kh='msg' 其中msg是父类中的 -->
<!-- 通过:bind绑定父类的值到子组件的kh,然后在js中用props承接 -->
<login :kh='msg' ref="first"></login>
<login :kh='msg' ref="second" @hong='fater' @dier='fater2'></login>
--------------------------------------------------------------------------
<!-- 这时候kh相当于调用时的msg-->
<template id="login"> <div>
<h1 v-text="kh" @click="say()"></h1>
</div>
</template>
(4.3.2)js代码示例
window.vm=new Vue({
el:'#app',
data:{
msg:"hello world",
},
components:{
'login':{
template:'#login',
//子类要用父类的值都在这里有体现
props:['kh'],
}
})
五.$refs
是实例和所有组件共享的一个变量
通过this可以直接调用
使用
1)无需通过v-bind指令进行绑定,只要想普通的标签的属性那样使用即可
2)属性值eg:refValue即后续我们要找的唯一标识
3)this.$refs.refValue拿到的是我们的组件
3-1)普通标签
3-2)组件的标签
六、全局组件
/**全局定义路由 */
Vue.component('father',fater)
七、所有代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item" @click="del(i)">
{{item}}
</li>
</transition-group> -->
<!-- 同过v-if进行隐藏显示 -->
<!--
<login v-if='flag'></login>
<regist v-else></regist>
<button type="button" @mouseover="flag=true" @mouseout='flag=false'>钱钱钱</button> -->
<button type="button" @mouseover="jilin='login'" @mouseout='jilin="regist"'>钱钱钱</button>
<!-- mode in-out先进后出 out-in先出后进 -->
<transition appear mode='out-in'>
<!-- :is后面跟的是变量,通过变量来指定组件 -->
<component :is="jilin"></component>
</transition>
<h1 @click='$children[0].son()'>点击调用儿子1</h1>
<h1 @click='$refs.first.son()'>点击调用儿子</h1>
<login :kh='msg' ref="first"></login>
<login :kh='msg' ref="second" @hong='fater' @dier='fater2'></login>
</div>
<!-- template最好不要在容器里面 -->
<template id="login">
<!--template的根容器只能有一个 -->
<div>
<h1 v-text="kh" @click="say()"></h1>
<!-- 绑定 -->
<h1 @click="$emit('hong',1,2,3,4)">点击我调用父亲方法</h1>
<h1 @click="$emit('dier',1,2,3,4)">点击我调用第二份父亲方法</h1>
</div>
</template>
<!-- template最好不要在容器里面 -->
<template id="regist">
<!--template的根容器只能有一个 -->
<div>
<h1 v-text="msg" @click="say()"></h1>
<h1>zzz</h1>
<h1>zzz</h1>
</div>
</template>
</body>
<script>
function get(_this){
alert(_this)
}
</script>
</html>
总结：后面还有非单文件的组件，后面我们再讲，还是那句话，一步步来，加油！
