组件

1.组件_概念

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

组件的好处:各自独立, 互不影响

2.组件_基础使用

1.创建组件 components/xxx.vue

2.注册组件: 创建后需要注册后再使用

全局注册

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

语法:

import Vue from 'vue'
import 组件对象 from 'vue文件路径'
Vue.component("组件名", 组件对象)

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

局部注册

语法:

import 组件对象 from 'vue文件路径'
​
export default {
    components: {
        "组件名": 组件对象
    }
}

任意vue文件中中引入, 注册, 使用

组件使用总结:

  1. (创建)封装html+css+vue到独立的.vue文件中

  2. (引入注册)组件文件 => 得到组件配置对象

  3. (使用)当前页面当做标签使用

3.组件-scoped作用

解决多个组件样式名相同, 冲突问题

原理与过程:会自动给标签添加data-v-hash值属性, 所有选择都带属性选择

4.组件通信-父向子-props

从一个vue组件里把值传给另一个vue组件(父->子)

父传子步骤:

1.子组件内, props定义变量, 在子组件使用变量
2.父组件内, 使用子组件, 属性方式给props变量传值

5.组件通信_单向数据流

在vue中需要遵循单向数据流原则

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

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

==父组件传给子组件的是一个对象,子组件修改对象的属性,是不会报错的,对象是引用类型, 互相更新==

总结: props的值不能重新赋值, 对象引用关系属性值改变, 互相影响

props变量本身是只读不能重新赋值

6.组件通信-子向父

语法:

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值