1、介绍
1.1 组件
- 组件是可复用的VUE实例，带有一个自己的组件名字，组件可以被用来当做自定义元素开使用。
- 组件有自己独立的作用域，任何数据不会传递到组件里
1.2 组件之间的关系
- 首先介绍VUE框架思想：通常一个应用会以一棵嵌套的组件树的形式来组织；
- 如下图，这是VUE官网介绍组件的图；
- 图中我用红色字母所标出来的：（以A、B、C、E为例）
- B、C和A， E和C 为父子关系；
- B和C是兄弟关系
- A和E是隔代关系
- 但是免不了组件之间需要传递数据来实现一些功能；
- 因为组件有自己的独立的作用域，不能直接访问父组件的数据，因此要实现组件之间的通信，需要使用一些特殊方法。
2、组件通信：
2.1 父传子——使用 v-bind 来动态传递prop
- 父组件
Parent.vue - 引入了两次子组件：
- 第一次 直接给
hh 属性赋值，将我来啦传递给子组件，hh 是我自己定义的，可以为任意字符，只要和定义的子组件props中的属性名相同就行 - 第二次 在使用子组件
<Child1>的时候，父组件将自己data里的数据title 使用v-bind指令绑定在子组件上； hh可以当做一个属性名，可以为任意值，由你定义；
<template>
<div>
<Child1 hh="我来啦"></Child1>
<Child1 v-bind:hh="title"></Child1>
</div>
</template>
<script>
import Child1 from '../BlogComponentCode/Child/Child1'
export default {
name: "Parent",
components:{
Child1
},
data(){
return{
title: '嘿嘿嘿，我是父组件!'
}
}
}
</script>
- 子组件
Child1.vue hh 数据就是父组件将自己的数据 title 绑定到 hh 属性中，- 子组件这边将父组件那边定义的
hh 放进自己的 props 列表中，就可以在页面上使用 hh 数据了
<template>
<div>
<h2>我是子组件,我收到的值为：{{hh}}</h2>
</div>
</template>
<script>
export default {
name: "Child",
props:['hh']
}
</script>
2.2 子传父——使用$emit方法
- 子组件
Child1.vue - 子组件的
button按钮使用点击事件click，其中使用 `$emit`` 方法第一个参数传入父组件定义的传过来的事件名称，第二个参数为要传给父组件的值
<template>
<div>
<button v-on:click="$emit('zichuanfu', content)">1111</button>
</div>
</template>
<script>
export default {
name: "Child",
data(){
return {
content: '$$$我想吃饭，我来自子组件---'
}
}
}
</script>
- 父组件
Parent.vue - 在子组件上定义事件
zichuanfu ,通过$event访问到被传出的值，此处将值赋值给num，之后用插值表达式渲染到页面上 zichuanfu可以自定义任意值，与子组件对应就行
<template>
<div>
<Child1 v-on:zichuanfu="num = $event"></Child1>
{{num}}
</div>
</template>
<script>
import Child1 from '../BlogComponentCode/Child/Child1'
export default {
name: "Parent",
components:{
Child1
},
data(){
return{
num:''
}
}
}
</script>
<template>
<div>
<Child1 v-on:zichuanfu="getChild"></Child1>
</div>
</template>
<script>
import Child1 from '../BlogComponentCode/Child/Child1'
export default {
name: "Parent",
components:{
Child1
},
methods:{
getChild(e){
alert(e);
}
}
}
</script>
- 点击按钮运行为：
|