好资源导航 » 文章资讯 » Vue组件创建和传值的方法

Vue组件创建和传值的方法

2023-09-08 21:25:04 47

##创建组件的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:['属性名']

*代码如下:

Vue.component('father',{
template:'....',
data(){
return{
mySonName:'小明'
}
},
//子组件
components:{
son:{
props:['myName'],
template:'...{{myName}}'
}
}
})

##子组件传值给父组件的方法
*先创建好父组件和子组件;

*在子组件methods方法中使用this.$emit()方法,
*这个方法有两个参数;参数1:需要与父组件交换事件名称,参数2:要传递的数据;

*在父组件模板的son标签中使用方法名的传递:

即,@tellFatherMyname="getMySonName";

*在父组件的methods方法中传入data参数,这个data=子组件传递过来的数据,然后让mySonName=data;*

代码如下:

###兄弟组件的创建和传值:

*创建兄弟组建时,先创建好父组件,然后在子组件中创建son组件和daughter组件;
*接下来是son组件和daughter组件之间传值;
* dau-->son传值

*在dau中先通过事件总线发射一个事件名称和要传递的数据;即eventbus.$emit('事件名称','数据')
* 事件总线:

vareventbus=newVue();

*在son中先写一个钩子函数,再通过eventbus.$on('事件名称',data=>{})方法去监听,接收兄弟节点发射过来的事件
* $on()有两个参数,参数1:事件名称;参数2:函数,函数的默认值是传递过来的数据*代码如下:
*

总结

以上所述是小编给大家介绍的Vue组件创建和传值的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

Vue组件创建和传值的方法

热门推荐

随机推荐