Vue学习笔记之组件

Vue学习笔记之组件

1、组件库：

      vant 组件库，是一个移动端的组件库。链接：https://vant-contrib.gitee.io/vant/#/zh-CN

      element-ui 组件库，是一个PC端的组件库。链接：https://element.eleme.cn/#/zh-CN/

2、组件（component）注册:

      私有组件注册：

     只能有注册了的App.vue使用 <left></left> 组件，其他如right.vue直接用left组件是用不了的。

     全局注册：

注册全局组件之后（在main.js文件里面注册），项目中的其他 组件就可以直接引用 ‘<myright></myright>’这个组件了

//在main.js入口文件中加入如下代码，进行全局注册组件
import right from '@/components/right.vue'
Vue.component('myright', right)

//然后在其他组件中，就可以直接引用了，比如在app.vue 中引用如下

  <myright></myright>

 

 3、组件之间的数据交互：

      父子关系：

      （1） 父传子：父组件通过 v-bind 自定义属性的方式定义数据，子组件通过props声明需要接收的属性，直接传输。

      （2）子传父：通过自定义事件的方式传值。

 

 

注意点：传过来的值需要在当前组件组件内定义接收，直接传过来的值是在接收的组件内是未被定义的，不能直接使用；同时，在接收组件里面对传过来的值进行修改是不会影响数据来源组件的原值的。（如下图所示）

 

 

 

      vue3中数据的双向传递：

           Vue2中使用不了v-model,值没法相互传递。

 

 

 兄弟关系

      EventBus 借助第三方包 mitt（npm install mitt） 来创建EventBus对象。

 

 

祖-->孙关系

      祖里面用：provide()传值，孙组件用 inject接收；但是provide传值不是响应式的，即 祖组件值变了，孙组件接收的还是旧的值。响应式数据需要用.value的形式使用。

      vuex可以让组件之间的数据实现共享，适合大范围的数据共享。小范围的数据共享还是可以使用上面介绍的内容。