博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue父子组件的传值
阅读量:5094 次
发布时间:2019-06-13

本文共 1027 字,大约阅读时间需要 3 分钟。

父组件传子组件:

父组件:

      //custom自定义的一个属性;test准备传入子组件的值

子组件:

export default {
props:["custom"]            //需要引入传过来的值custom;那么custom就可以直接使用了{
{custom}}}

这样父传子,就完成了。

子组件传父组件:

1.父组件和子组件需要连接:connect.js(用一个js文件链接)

import Vue from "vue"  var connect = new Vue();export default connect;

2.父组件做好接受和需要的事件

import connect from "./components/connect.js"          //引入链接的js的文件 export default {
methods:{ accept(){                            //条件满足后执行accept准备接受值! connect.$on("value",function(msg,b){        //value一定要和后面子组件传的名称一样;参数msg,b和子组件传的值一一对应 console.log(b); }) } }}

3.子组件发送值

import connect from "./connect.js"                //引入链接的js,让父组件和子组件链接一起export default {methods:{        sendOut(){                          //执行sendOut传值给父组件             connect.$emit("value","test","test1")       //传值        }        }}

这个connect.js可以复用!多个组件都可以公用,但是需要注意value这个值,一定不能一样,不然会数据会变得乱,具体杂乱可以试试看!

主要就是用来记录,下回看到自己的,让自己也能看懂!

 

 

转载于:https://www.cnblogs.com/ash-sky/p/9772269.html

你可能感兴趣的文章
MVC框架
查看>>
IIS在默认情况并不支持对PUT和DELETE请求的支持
查看>>
AS400的触发器(转载)
查看>>
1044 拦截导弹
查看>>
Uploadify使用
查看>>
PriorityQueue 优先队列的实现
查看>>
[Vue]导航守卫:全局的、单个路由独享的、组件级的
查看>>
js中keydown和keypress的区别
查看>>
百度富文本编辑器自动缩放上传的图片
查看>>
从PHP5.0到PHP7.1的性能全评测
查看>>
sql语句中的字符串拼接
查看>>
【例9.11】01背包问题
查看>>
初学Python:基础部分
查看>>
词法分析修改版
查看>>
CentOS7.5 通过wget下载文件到指定目录
查看>>
java后端程序员1年工作经验总结
查看>>
P4843 清理雪道
查看>>
PhpStorm之设置字体大小
查看>>
js实现倒计时(分:秒)
查看>>
Web 存储之localStorage
查看>>