本文详细介绍了Vue.js中创建全局与私有组件的多种方法，包括使用`Vue.component`、`extend`、设置`id`以及`.vue`文件。同时讲解了组件中的`data`和`methods`，以及如何进行组件间的通信，如父组件向子组件传递数据和方法，子组件向父组件回传数据。此外，还讨论了`data`和`props`的区别，并提供了一个评论列表的案例展示。
文章目录
一、创建全局组件
Vue组件也是Vue实例 例方式1：com1
方式1：component
1.创建组件时结合Vue中extend
const com1 = Vue.extend({
template:"<h1>这是创建的第一个全局组件</h1>"
//表示这个组件的UI代码解构
})
注：template 不能单独放一个文本，必须用标签包裹起来
只能包含一个根元素
2.向全局注册一个组件
// Vue.component("组件的名称",组件的构造函数){}
//组件名称可以包含大写例如myCom1 但引用时需要my-com1
Vue.component("mycom1",com1)
3.在页面中引用
<div id="app">
<!-- 把组件的名称以标签的形式放到页面上 -->
<mycom1></mycom1>
</div>
方式2：注册组件时第二个参数接收一个对象（不必使用extend）
Vue.component("mycom2",{
template:"<h2>这是直接使用Vue.component 创建的组件 </h2>"
})
方式3：设定id
<template id="tmpl">
<h3>这是在外界定义的组件UI解构</h3>
</template>
Vue.component("mycom3",{
template:"#tmpl"
})
注： 先写入挂载元素
再定义template标签
方式4：.vue组件文件
要求会配置webpack
二、创建私有组件
在创建实例中创建组件（只能在app内使用）
var vm = new Vue({
el:"#app",
data:{},
methods:{},
components:{
"mycom4":{
template:"<h6>这是定义的私有组件</h6>"
}
}
})
三、组件中的data和methods
<div id="app">
<counter></counter>
<hr>
<counter></counter>
</div>
const o = {count:0}
Vue.component("counter",{
template:`<div>
<input type='button' value='+1' @click="add" />
<h3>当前的count值为：{{count}}</h3>
</div>`,
//在组件中可以有自己的私有数据，但是data必须是一个function，并且内部返回一个数据对象
data:function(){
//使用下面这种方法，当两次在页面中引用<counter>，发生数据联动，操纵同一个data
//return o
//官方推荐方式，每次引用时，都会返回一个新对象。
return {
count:0
}
},
methods:{
add(){
this.count++
}
}
})
注：把组件中data定义为一个function，每当引用一次组件，必先会调用data function从而得到一个当前组件的私有数据对象。
四、组件的切换
1）两个组件
1.创建两个组件 login 和 reg
Vue.component("login",{
template:"<div>登录组件</div>"
})
Vue.component("reg",{
template:"<div>注册组件</div>"
})
2.flag为true——登录 false——注册
<div id="app">
<input type="button" value="登录" @click="flag=true">
<input type="button" value="注册" @click="flag=false">
<login v-if="flag"></login>
<reg v-else="flag"></reg>
</div>
2）多个组件 使用<component :is=" ">
创建四个组件并定义comname
Vue.component("com1",{
template:"<h3>111111</h3>"
})
Vue.component("com2",{
template:"<h3>22222</h3>"
})
Vue.component("com3",{
template:"<h3>333333</h3>"
})
Vue.component("com4",{
template:"<h3>444444</h3>"
})
var vm = new Vue({
el:"#app",
data:{
comname:"com1"
},
methods:{},
})
使用:is
<div id="app">
<a href="#" @click="comname='com1'">显示组件1</a>
<a href="#" @click="comname='com2'">显示组件2</a>
<a href="#" @click="comname='com3'">显示组件3</a>
<a href="#" @click="comname='com4'">显示组件4</a>
<transition>
<component :is="comname"></component>
</transition>
<!-- 此处接收的为字符串 -->
</div>
添加动画效果
<style>
.v-enter{
/*即将进入时*/
opacity: 0;
transform: translateX(100px);
}
.v-leave-to{
/*离开最终到达位置*/
opacity: 0;
transform: translateX(-100px);
}
.v-enter-active,.v-leave-active{
transition: all 0.4s ease;
position: absolute;
}
</style>
五、父组件向子组件传递
1. 父组件向子组件传值
在Vue中默认子组件无法获取父组件中的数据
1）把要传递给子组件的数据，作为 自定义数据 通过v-bind绑定到子组件身上
<com1 :msg="parentMsg"></com1>
2）在子组件中不能直接使用父组件传递过来的数据，需要先使用props数组接收一下
props:["msg"]
注：在使用props接收时，接收的名称，一定要和父组件传递过来的自定义属性名称保持一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app">
<com1 :msg="parentMsg"></com1>
</div>
<script>
var vm = new Vue({ //该实例为父组件
el:"#app",
data:{
parentMsg:"哈哈哈哈"
},
methods:{},
components:{ //私有组件（子组件）
"com1":{
template:`<div>
<h3>这是子组件中的标题{{msg}}</h3>
</div>`,
props:["msg"]
}
}
})
</script>
</body>
</html>
2.父组件向子组件传递对象
与上类似
template:"<h3>哈哈哈{{JSON.stringify(msgobj)}}</h3>"
3.父组件向子组件传递方法
使用 this.$refs 来获取元素和组件
传递data中数据，使用属性绑定的形式v-bind
传递methods中方法，使用事件绑定的形式v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app">
<com1 @func="show"></com1>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{},
methods:{
show(){
console.log("有人调用了父组件的方法")
}
},
components:{
"com1":{
template:"<input type='button' @click='btnClick'/>",
methods:{
btnClick(){
//调用父组件传过来的func方法
this.$emit("func")
}
}
}
}
})
</script>
</body>
</html>
4.子组件向父组件传递数据
本质上还是调用了父组件传递过来的方法，只不过子组件在调用的时候，把数据当作参数，传给父组件方法了
var vm = new Vue({
el:"#app",
data:{},
methods:{
show(args){
console.log("有人调用了父组件的方法"+args)
}
},
components:{
"com1":{
template:"<input type='button' @click='btnClick'/>",
data(){
return{
sonMsg:"这是子组件的数据"
}
},
methods:{
btnClick(){
//调用父组件传过来的func方法
this.$emit("func",this.sonMsg)
}
}
}
}
})
ref属性
1.被用来给元素或子组件注册引用信息（id的替代
2.应用在html标签上获取的是真实DOM元素，应用在组件标签上获取组件实例对象（vc）
3.获取：this.$refs.xxx
<body>
<div id="app">
<h3 ref="myh3">{{ msg }}</h3>
<input type="button" value="获取元素内容" @click="getInfo">
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"000"
},
methods:{
getInfo(){
console.log(this.$refs.myh3.innerHTML)
}
}
})
</script>
</body>
修改子组件上的数据、调用子组件的方法
<body>
<div id="app">
<input type="button" value="获取页面上的组件" @click="getCom">
<mycom ref="mycom"></mycom>
</div>
<script>
Vue.component("mycom",{
template:"<h3>这是一个组件 {{msg}}</h3>",
data:function(){
return {
msg:"ok"
}
},
methods:{
show(){
console.log("调用子组件的方法")
}
}
})
var vm = new Vue({
el:"#app",
data:{},
methods:{
getCom(){
// this.$refs.mycom.msg="123"
this.$refs.mycom.show();
}
}
})
</script>
</body>
六、在Vue组件中data和props的区别
1.data在组件中，被定义成function并返回一个对象
2.props在组件中，被定义成一个数组，其中，数组的值都是字符串名，表示父组件传递过来的数据
3.props的数据，不能直接修改，如果想要修改，必须在data上重新定义一个属性，然后把属性的值 定义为 this.props
4.data 中是组件自己私有的数据，data上数据都是可读可写的
5.props 中是外界传来的数据，props中的数据只能读取，不能重新写入
评论列表案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app">
<cmt-box @func="addNewCmt"></cmt-box>
<ul>
<cmt-item v-for="(item,i) in list" :item="item" :key="i" ></cmt-item>
</ul>
</div>
<script>
Vue.component("cmt-item",{
template:`<li>
<h3>评论人：{{ item.name }}</h3>
<h5>评论内容：{{ item.content }}</h5>
</li>`,
props:["item"]
})
Vue.component("cmt-box",{
template:`<div>
<label>评论人：</label><br>
<input type="text" v-model="name"><br>
<label>评论内容：</label><br>
<textarea v-model="content"></textarea><br>
<input type="button" value="发表评论" @click="postComment">
</div>
`,
data:function(){
return {
name:"",
content:"",
}
},
methods:{
postComment(){
const cmt = {name:this.name,content:this.content };
//子组件中调用父组件传递过来的方法，可以把子组件的数据当作参数，传递给父组件的方法去使用
this.$emit('func',cmt)
this.name=this.content=""
}
}
})
var vm = new Vue({
el:"#app",
data:{
list:[
{name:"zs",content:"沙发"},
{name:"ls",content:"板凳"},
{name:"qqq",content:"凉席"},
{name:"eee",content:"砖头"}
]
},
methods:{
addNewCmt(cmt){//添加新评论
this.list.push(cmt)
}
},
})
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
