vue组件的基本使用，以及组件之间的基本传值方式

组件（页面上的每一个部分都是组件）

1.三部分：结构（template），样式（style），逻辑（script）

2.组件的作用：复用

3.模块包含组件

4.组件创建：

1.全局组件:Vue.component();

2.局部组件：components（）;

参数1：组件的名称

参数2：组件的配置项

*组件的配置项：

1.new Vue这个里面有什么参数，那么组件的配置项中就有什么参数，包含生命周期

2.组件内部多了一个属性template

3.组件内部的data不在是一个对象，而是一个函数

组件的使用：

1.直接将组件的名称当做标签使用即可

2.组件名称首字母必须大写

5.脚手架的使用

1.安装：

3.0 cnpm install @vue/cli -g

2.9.3 cnpm install vue-cli -g

2.创建项目

3.0 vue create <项目名称>

2.9.3 vue init webpack <项目名称>

6..组件间的传值（组件之间的通讯）

一.父子通信

1.父传子

传递：当子组件在父组件当做标签使用的时候，通过给子组件绑定一个自定义属性，值为需要传递的数据

接收：在子组件内部通过props进行接收

接收方式有两种：

1.一种是数组接收，2.另一种是对象接收

一般情况下我们都使用对象进行接收，因为对象接收可以校验数据的类型

eg：

props:["val"];

props:{

val:String//当这个是number的时候，就会有警告

}

2.子传父

（1）传递：当子组件给父组件传递数据的时候，通过调用父组件给子组件绑定的自定义事件，然后将传递过去

接收：父组件通过自定义事件的函数来接收子组件传递过来的数据（注意这个自定义方法的函数在绑定的时候不需要加（））

（2）作用域插槽

二、非父子

1.在vue的原型身上添加一个公共的vue实例，组件之间调用这个公共的实例的$on and $emit来传递数据，传递的一方调用$emit,接收的一方用$on;

2.手动封装$on $emit $off（原理应用了观察者模式）

3.EventBus

4.vuex

转载于:https://www.cnblogs.com/xuazi-7an/p/10567550.html

vue组件的基本使用，以及组件之间的基本传值方式相关推荐

微信小程序页面之间三种传值方式
第一种:url传值 A页面部分js代码 Page({jumpPage(e) {var zhi = 'biubiubiu~~';wx.navigateTo({url: '/pages/detail/de ...
Vue和React组件之间的传值方式
在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些? 组件间的传值方式组件的传值场景无外乎以下几种: 父子之间兄弟之间多层级之间(孙子祖父或者更多) 任意组件之间父子之间 ...
Vue.js父与子组件之间传参父向子组件传参　　例子：App.vue为父，引入componetA组件之后，则可以在template中使用标签（注意驼峰写法要改成componet-a写法，因为ht
Vue.js父与子组件之间传参父向子组件传参例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对 ...
Vue组件之间的传参方式小总结
学习vue的组件,可能很多人已经了解了组件的创建注册使用,但是随之而来的就是组件之间的通信,父子组件怎么传? 兄弟组件怎么传? 不是父子组件又怎么传? 接下来介绍几种组件之间的传参方式,也是很容易面试 ...
vue的$emit 与$on父子组件与兄弟组件的之间通信
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输. 主要的传输方式有三种: 1.父组件到子组件通信 2.子组件到父组件的通信 3.兄弟组件之间的通信一.父组件传值给子组件父组件 ...
【Vue组件传值】不同的组件之间的数据传值方法
不同的组件之间的数据传值方法父组件向子孙组件传值.通过方法provide / inject (1)provide/inject的介绍: provide/ inject 是vue2.2.0新增的api ...
Vue组件之间数据通信12种方式
目录 1.父组件向子组件传递数据 props 2.子组件向父组件传递数据($emit的用法) 3.兄弟组件通信 4.ref / $refs 5.eventBus事件总线($emit / $on) 6. ...
Vue 组件之间的传值方式有哪些？
Vue 组件之间的传值方式有哪些? 在平常写Vue项目时,组件传值必不可少,今天我们就要总结一下有哪些种方式呢? 1.父组件向子组件传值(用props) 子组件 <template>< ...
vue.js html 相互传值,Vue 父子组件之间相互调用传值以及多层组件之间相互调用传值...
一.父子组件传值要点1:父组件赋予子组件属性值,子组件通过props 来接收值. 要点2:父组件可以通过子组件对象($ref),来调用子组件的属性以及方法要点3:子组件通过$emit 来调用父组 ...

vue组件的基本使用，以及组件之间的基本传值方式

vue组件的基本使用，以及组件之间的基本传值方式相关推荐

最新文章

热门文章