vue实现组件之间传值功能示例
本文实例讲述了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程序设计有所帮助。
相关推荐
-
Vue.js中兄弟组件之间互相传值实例
兄弟组件之间互相传值,需要建立一个"中转站"(新的vue实例),并且需要主动触发. 实例上的$on方法来接受监听. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传值</title> <script src="vue.js"></script
-
详解vue 组件之间使用eventbus传值
对于前端的我们而言,并非是只有写界面才是最大的问题,很多的情况下,我们需要关注的是数据,比如js页面的数据传递等等,学习vue我们也是需要知道怎么去使用数据 当然,使用存储也是可以得,但是并非一定要缓存,当然在vue中有推荐了我们去使用vuex去数据交互,Vuex会让你的Vue代码足够灵活可控,把数据统一存入state, 只允许通过Actions触发Mutations修改.然而,有时候我们的项目并没有复杂到需要用上Vuex.,(我们也不讨论已经废除的vm.$dispatch)很多情况下我们都是需
-
详解vue父子组件间传值(props)
先定义一个子组件,在组件中注册props <template> <div> <div>{{message}}(子组件)</div> </div> </template> <script> export default { props: { message: String //定义传值的类型<br> } } </script> <style> </style> 在父组件中,引入
-
vue 子组件向父组件传值方法
子组件注册触发事件,父组件注册 触发子组件事件后的方法写在method里面 父组件这么写 <component-a v-on:child-say="listenToMyBoy"></component-a> <p>Do you like me? {{childWords}}</p> methods: { listenToMyBoy: function (somedata){ this.childWords = somedata } } 子
-
vue2.0组件之间传值、通信的多种方式(干货)
Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.这次我们就来聊一聊vue2.0组件之间传值.通信的多种方式. 一.通过路由带参数进行传值 ①两个组件 A和B,A组件通过query把orderId传递给B组件(触发事件可以是点击事件.钩子函数等) this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B ②在B组件中获取A组件传递过来的参数 this.
-
Vue 组件传值几种常用方法【总结】
使用vue也有很多年了,一直都没有整理一下相关知识,给大家总结下开发过程中所遇到的一些坑,主要给大家总结一下vue组件传值的几种常用方法: 1.通过路由带参数传值 ① A组件通过query把id传给B组件 this.$router.push({path:'/B',query:{id:1}}) ② B组件接收 this.$route.query.id 2.父组件向子组件传值 使用props向子组件传递数据 子组件部分:child.vue <template> <div> <ul
-
Vue2.0 组件传值通讯的示例代码
在Vue项目中,我们经常把某个功能模块封装起来,形成组件,下次调用时非常方便,同时也是在一些循环中进行dom操作的一种较好方式. 本次我想以一个评价组件来说一下组件的事件和参数是怎样传递的,如何完成的组件通讯. 示例如下: 这里先说一下组件设计思路: 明确整个功能场景,找出存在的事件操作,此例是一个简单的评价功能,即点击某一个星星时左边以及当前为选中的黄色星,右边为未选中的白色星. 确定可复用的组件,即具有重复操作的模块,这里明显的每一个星星为一个可复用组件, 其实还有个星星变成白色和黄色也是一
-
Vue父子模版传值及组件传值的三种方法
这里是针对于vue1.0,如果要学2.0,建议大家去看官方文档 vue2.0 http://vuefe.cn/guide/ vue-router2.0https://router.vuejs.org/zh-cn/essentials/getting-started.html 第一种 <div id="example"> <my-component></my-component> </div> <script src="..
-
浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue <template> <div class='tmpl'> goodsList组件 </div> </template> <style> </style> <script> export default { data() { return{} }, creat
-
vue父组件向子组件动态传值的两种方法
在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片 方法有两种, 方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组 父组件: <uploadImg :width="200" :height="200" name="productImage" size=&qu
随机推荐
- thinkphp数据查询和遍历数组实例
- Docker出现Cannot connect to the Docker daemon. Is the docker daemon running on this host错误解决办法
- java基础学习笔记之泛型
- python学习 流程控制语句详解
- Farpoint的简单用法简要概述
- thinkphp3查询mssql数据库乱码解决方法分享
- JavaScript实现快速排序(自已编写)
- Linux系统下操作Apache最基本的启动停止和重启命令
- 大数据量高并发的数据库优化详解
- 基于jquery的表格排序
- jQuery总体架构的理解分析
- PowerShell 定时执行.Net(C#)程序的方法
- 注册表基础—注册表使用全攻略之一
- 浅析C语言中的数组及字符数组
- 用IS6 进行 ASP 软件的打包和自动安装 的方法
- Python KMeans聚类问题分析
- JS高阶函数原理与用法实例分析
- 解决Django加载静态资源失败的问题
- CentOS6.5安装python3.7详细步骤
- Docker版的MySQL5.7升级到MySQL8.0.13,数据迁移