vue实现组件之间传值功能示例
更新时间：2018年07月13日 14:42:56 作者：哼着自己的小调调
这篇文章主要介绍了vue实现组件之间传值功能,结合实例形式分析了vue.js父子组件之间相互传值常见操作技巧,需要的朋友可以参考下
本文实例讲述了vue实现组件之间传值功能。分享给大家供大家参考，具体如下：
slot标签：
想向封装好结构的组件中插入内容，需要借助<slot></slot>
在组件之中进行关联：如
模板中：
<slot name='txt'></slot>
组件调用中：
<p slot='txt'></p>
注：如果只有slot上面每一定义name属性，则只能有一个slot
<div class='box'>
<com>
<p slot='txt'></p>
</com>
</div>
<template id="c">
<div>
<slot name="txt"></slot>
</div>
</template>
Vue.component('com',{
template:"#c"
})
父组件向子组件传值：props
父组件：
<template> <child :parent-msg='a'></child> </template>
子组件：
child：{
template：'#chi'
props：['parentMsg']
}
子组件向父组件的传值：
vue只运行数据的单选传递，在子组件向父组件的传值中，需要事件触发
子组件：
<template> <div @click="up"></div> </template>
methods:{
up(){
this.$emit('fn','msg') // 主动触发fn方法，msg是需要传递的数据
}
}
父组件：
<div> <child @fn="getval"></child> </div>
methods:{
getval(msg){ // msg接收到的数据
this.msg=msg
}
}
希望本文所述对大家vue.js程序设计有所帮助。
相关文章
这篇文章主要介绍了Vue3中如何自定义双向绑定问题,具有很好的参考价价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了vue2.0结合Element-ui实战案例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要为大家详细介绍了vue+elementui实现选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue3项目启动自动打开浏览器以及server配置过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
今天小编就为大家分享一篇关于vue表单提交防双/多击的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了Vue3中的ref为何要用.value进行值的调用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
下面小编就为大家分享一篇vue axios 在页面切换时中断请求方法 ajax，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
Proxy提供了强大的Javascript元编程,有许多功能,包括运算符重载,对象模拟,简洁而灵活的API创建,对象变化事件,甚至Vue 3背后的内部响应系统提供动力,这篇文章主要给大家介绍了关于vue Proxy数据代理进行校验部分源码解析的相关资料,需要的朋友可以参考下2022-01-01
这篇文章主要为大家详细介绍了vue实现分页栏效果，分页栏设计的步骤与实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
本文给大家介绍利用Vue实现tab导航栏，并且通过flex布局实现左右滑动效果，通过代码给大家分享tab导航栏布局的实现，本文给大家展示了完整代码，需要的朋友参考下吧2021-06-06
最新评论