怎么在Vue中创建组件和传值
导读:本文共2891.5字符,通常情况下阅读需要10分钟。同时您也可以点击右侧朗读,来听本文内容。按键盘←(左) →(右) 方向键可以翻页。
摘要: ## 创建组件的3种方法# 第一种:+ Vue.extend()函数返回一个组件的构造器,里面包含一个参数,参数是对象,对象里面是一些配置项+ Vue.component()函数利用Vue.extend()返回的构造器创建一个组件的实例,有两个参数.;参数1:组件名字,参数2:组件构造器注意: 模板template中只能有一个根节点 组建的名字采用驼峰命名的话,... ...
目录
(为您整理了一些要点),点击可以直达。## 创建组件的3种方法
# 第一种:
+ Vue.extend()函数返回一个组件的构造器,里面包含一个参数,参数是对象,对象里面是一些配置项
+ Vue.component()函数利用Vue.extend()返回的构造器创建一个组件的实例,有两个参数.;
参数1:组件名字,参数2:组件构造器
注意:
模板template中只能有一个根节点
组建的名字采用驼峰命名的话,使用时,就要加上"-"; 例如:组件名字indexA-->index-a;
## 第二种:
+ Vue.component('indexB',{模板})
## 第三种:
+ 通过制定模板创建,在Vue管辖范围之外定义模板
## 总结:
+ 先制造一个模板,在创建组件
## 组件中使用指令:
+ 在Vue.component()里边,有template模板,有data()函数,有methods()方法
+ 注意:data()必须是一个个函数.不能使用属性定义;函数里边return出去一个对象
## 父组件传值给子组件的方法
* 先创建好父组件和子组件
* 在父组件的模板中的son,子组件标签里绑定 :属性 = 父组件需要传递的数据;
* 在子组件的son{}中 使用props来接收父组件传递过来的数据;
* props后跟一个数组,数组中是一个个字符串,这些字符串可以当成属性使用,即props:['属性名']
* 代码如下:
*
## 子组件传值给父组件的方法
* 先创建好父组件和子组件;
* 在子组件methods方法中使用this.$emit()方法,
* 这个方法有两个参数;参数1:需要与父组件交换事件名称,参数2:要传递的数据;
* 在父组件模板的son标签中使用方法名的传递:
即,@tellFatherMyname = "getMySonName";
* 在父组件的methods方法中传入data参数,这个data=子组件传递过来的数据,然后让mySonName = data;*
代码如下:
### 兄弟组件的创建和传值:
* 创建兄弟组建时,先创建好父组件,然后在子组件中创建son组件 和 daughter组件;
* 接下来是 son组件 和daughter组件之间传值;
* dau --> son传值
* 在dau中 先通过事件总线发射一个事件名称和要传递的数据;即eventbus.$emit('事件名称','数据')
* 事件总线:
var eventbus = new Vue();
* 在 son 中先写一个钩子函数,再通过eventbus.$on('事件名称',data=>{})方法去监听,接收兄弟节点发射过来的事件
* $on()有两个参数,参数1:事件名称;参数2:函数,函数的默认值是传递过来的数据* 代码如下:
*
怎么在Vue中创建组件和传值的详细内容,希望对您有所帮助,信息来源于网络。