Vue组件

112 阅读2分钟

1.为什么学习组件

开发中常有要复用的代码,这时我们复制粘贴就显得代码太过冗余,不利于维护

2.组件是什么呢

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

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

image.png

3.组件的基本使用

创建组件,分装要是用的组件分为两种:全局组件、局部组件

使用的步骤:
1.封装组件:
可复用的vue实例
2.引入组件:
import 组件名 from '组件所在路径'
3.注册组件:
全局注册:main.jsVue.components(组件名,组件对象)
局部注册:components:{组件名}
4.使用组件:
在tempalte模板使用<组件名></组件名>(组件名大写小写都可以)

4.scoped组件 只在当前组件中生效 scoped 原理

1.当前组件所有标签加data-v-hash(给所有标签加哈希)
2.当前组件所有选择器加属性选择器[data-v-hash]

5.组件通信-父向子传值

1.父向子_props

image.png

1.什么时候需要父传子技术?
从一个vue组件里把值传给另一个vue组件(父->子)
2.父传子步骤是什么?
子组件内, props定义变量, 在子组件使用变量。父组件内, 使用子组件, 属性方式给props变量传值

2.组件通信-父向子-配合循环

image.png

3.单向数据流-父到子的更新

1.从父到子的数据流向, 叫单向数据流
2.props里定义的变量不能修改,不会同步父组件,只会在子组件修改,数据会错乱,产生bug

image.png

注意 :不要修改porps中的数据

6.组件通信-子向父传值 使用$em()方法触发自定义事件

 1.父组件给子组件绑定自定义事件,定义事件处理函数
 2.使用this.$emit()方法触发自定义事件
  • 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
  • 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
  • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听 image.png

7.父子组件的总结

在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了