本文详细介绍了Vue中的组件使用，包括组件的创建、占位符、模板、实例化和挂载。同时，讲解了组件的嵌套，即父子组件的关系，并展示了如何在父组件中向子组件传递参数及子组件向父组件回调的方法。通过具体代码示例，阐述了Vue组件的完整生命周期和数据通信机制。
一、介绍组件
在Vue中，组件是非常重要的组合部分，是官方认定的可复用的Vue实例
二、使用组件
组件的搭建通常由占位符、书写模板、新建组件、挂载组件四个部分构成，是一种从上到下的写法。
<body>
<div id="app">
<!-- 第一步：书写占位符 占位符的名字不能和标签名一样 -->
<v-header></v-header>
</div>
</body>
//书写模板单独放在外面，使用template包裹
<template id="header">
<main>
<h1>这是头部</h1>
<p @click="change()">这是头部内容{{num}}</p>
<p>{{msg}}</p>
</main>
</template>
<script src="js/vue.js"></script> //引用vue.js文件
<script>
// 新建组件 和实例化对象非常类似
var vheader={
// template书写页面结构
template:'#header', //绑定书写模板的ID，用#+id名
data(){
//组件中的数据是函数的形式,通过return返回
return {
msg:'这是头部'
}
}
}
new Vue({
el:'#app',
// 挂载组件
components:{
// 占位符:组件名字
'v-header':vheader
}
})
</script>
根据上方代码就写完了一个组件，要注意的是按步骤进行，梳理好逻辑
三、嵌套组件
嵌套组件也可以叫做父子组件，顾名思义就是在组件中写组件
<div id="app">
<con></con> //书写占位符
</div>
//书写模板
<template id="con">
<main>
<h1>这是内容</h1>
<v-h></v-h> //v-h和v-c都为子组件
<v-c></v-c>
</main>
</template>
<script src="js/vue.js"></script> //引用vue.js
<script>
var h={
template:'#h'
}
var c={
template:'#c'
}
var con={
template:'#con',
components:{
'v-h':h,//绑定子组件
'v-c':c
}
}
new Vue({ //挂载组件
el:'#app',
components:{
// 占位符和组件的名字一样，可以简写
// 对象的属性和值一样，可以简写
con,
}
})
</script>四、父组件给子组件传参
在占位符中使用：“:子组件中接收的数据名="父组件的数据" ”
<v-header :cmsg="p"></v-header>在子组件的props属性中接收数据 props:['子组件中接收的数据名']
props:['子组件中接收的数据名']在子组件中使用，子组件中接收的数据名
<template id="header"><h1>传递过来的数据{{cmsg}}</h></template>五、子组件传参给父组件
先在子组件中定义一个函数，内部自定义一个事件 this.$emit('自定义事件名',参数,参数)
fn(){
// 定义事件 this.$emit('事件名自定义',传递参数,传递参数)
this.$emit('aa',this.c,this.c1,this.user)
}在占位符中 @自定义事件名="父组件中的方法" 该方法不能加()
<v-header @aa="getval"></v-header> //方法名和事件名没有硬性要求在父组件中，增加方法，接收参数
getval(b,c,m){
console.log(b,c,m)
this.p2=b;
this.p3=c;
this.user=m
}在子组件中调用定义的函数
data(){
return {
c:'这是子组件的数据',
c1:'xxx',
user:{
a:10
}}}
扫一扫
1508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
