Vue2 组件基础使用、父子组件之间的传值

本文介绍了Vue中的组件系统,包括全局和局部注册组件的方式,以及如何通过prop进行父组件向子组件传递数据。同时,讨论了Boolean类型的prop转换规则和prop的默认值设定。此外,还讲解了子组件如何通过自定义事件向父组件传递数据以及使用$refs进行父子交互。
摘要由CSDN通过智能技术生成

一、什么是组件

如画红框的这些区域都是由vue里的各种组件组成、提高复用信

通常一个应用会以一棵嵌套的组件树的形式来组织:
例如,你可能会有页头、侧边栏、内容区等组件,每个组件又包含了其它的像导航链接、博文之类的组件。
为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型:全局注册局部注册。至此,我们的组件都只是通过 Vue.component 全局注册的:

创建一个组件示例:

然后到app.vue 进行使用

<script>
import Content from './components/Content.vue'  //组件
export default {
  data(){
    return{

    };
  },
  components:{   //使用组件的函数
    Content
  }
};
</script>

<template>
  <!-- 使用组件 -->
    <Content></Content>
</template>

<style scoped></style>
向父容器传值:

传递 prop

如果我们正在构建一个博客,我们可能需要一个表示博客文章的组件。我们希望所有的博客文章分享相同的视觉布局,但有不同的内容。要实现这样的效果自然必须向组件中传递数据,例如每篇文章标题和内容,这就会使用到 prop。

父容器向子组件通过 :任意命名 传递到子组件
子组件通过props 来取到的数据
app.vue 里就取到了

Prop类型: 对接受的类型进行限制
  • String

  • Number

  • Boolean

  • Array

  • Object

  • Date

  • Function

  • Symbol

Boolean 类型转换#

为了更贴近原生 boolean attributes 的行为,声明为 Boolean 类型的 props 有特别的类型转换规则。以带有如下声明的 <MyComponent> 组件为例:

js

export default {  props: {    disabled: Boolean  }}

该组件可以被这样使用:

template

<!-- 等同于传入 :disabled="true" --><MyComponent disabled /><!-- 等同于传入 :disabled="false" --><MyComponent />

当一个 prop 被声明为允许多种类型时,例如:

js

export default {  props: {    disabled: [Boolean, Number]  }}

无论声明类型的顺序如何,Boolean 类型的特殊转换规则都会被应用。

  • 所有 prop 默认都是可选的,除非声明了 required: true。

  • 除 Boolean 外的未传递的可选 prop 将会有一个默认值 undefined。

  • Boolean 类型的未传递 prop 将被转换为 false。这可以通过为它设置 default 来更改——例如:设置为 default: undefined 将与非布尔类型的 prop 的行为保持一致。

  • 如果声明了 default 值,那么在 prop 的值被解析为 undefined 时,无论 prop 是未被传递还是显式指明的 undefined,都会改为 default 值。

自定义事件向父容器传递数据

一、定义一个@click事件通过事件将子数据msgs传递

二、 在父组件中,通过v-on监听子组件中自定义的事件 赋值给父容器msg

三、父组件访问子组件$refs

ref把子组件的属性传给了父组件

打印后查看

四、子组件访问父组件和跟组件

<!-- 子组件访问父组件:$parent -->的数据 不推荐使用 影响复用性

<!-- 子组件访问根组件:$root -->

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值