Vue之组件与组件通信

一、组件概念

组件是可复用的 Vue 实例, 用来封装标签, 样式和JS代码。

组件化 :封装的思想,把页面上 可重用的部分 封装为 组件,从而方便项目的 开发 和 维护

一个页面, 可以拆分成一个个组件,一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)

二、组件的使用

1、创建组件

2、引入组件

import Pannel from './components/Pannel_1'

3、注册组件

(1)全局注册

全局入口在main.js, 在new Vue之上注册

// 目标: 全局注册 (一处定义到处使用)
// 1. 创建组件 - 文件名.vue
// 2. 引入组件
import Pannel from './components/Pannel'
// 3. 全局 - 注册组件
/*
  语法: 
  Vue.component("组件名", 组件对象)
*/
Vue.component("PannelG", Pannel)

全局注册PannelG组件名后, 就可以当做标签在任意Vue文件中template里用

单双标签都可以或者小写加-形式, 运行后, 会把这个自定义标签当做组件解析, 使用,组件里封装的标签替换到这个位置

<PannelG></PannelG>
<PannelG/>
<pannel-g></pannel-g>

(2)局部注册



<script>
// 1. 创建组件 - 文件名.vue
// 2. 引入组件
import Pannel from './components/Pannel_1'
export default {
  // 3. 局部 - 注册组件
  /*
    语法: 
    components: {
      "组件名": 组件对象
    }
  */
  components: {
    PannelL: Pannel
  }
}
</script>

4、使用组件

<template>
  <div id="app">
    <PannelG></PannelG>
  </div>
</template>

三、组件通信

1、父向子

(1)子组件内, props定义变量, 在子组件使用变量

(2)父组件内, 使用子组件, 属性方式给props变量传值

2、单向数据流

(1)父组件的数据发生了改变,子组件会自动跟着变

(2)子组件不能直接修改父组件传递过来的props props是只读的

2、子向父

当子想要去改变父里的数据时,就要用到子向父通信。

语法:

  • 父: @自定义事件名="父methods函数"

  • 子: this.$emit("自定义事件名", 传值) - 执行父methods里函数代码

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值