<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--父亲拿儿子的属性，通过的就是发布订阅，父亲声明一个方法，儿子触发-->

<div id="app"></div>

</body>

<script src="node_modules/vue/dist/vue.js"></script>

<script>

    //实例化一个Vue函数

    let vm=new Vue({

        //child 是儿子 触发了自己的一个方法，绑定了父亲的一个函数方法

        template:'<div><child @childs="say"></child></div>',

        //方法挂载

        methods:{

            //父亲的一个方法

            say(data){

               console.log(data);

            }

        },

        //定义一个儿子组件

        components:{

            //儿子名字

            child:{

                //事件和数据初始化之后

                created(){

                    //儿子发射一个方法 传递自己的数据

                    this.$emit('childs',this.msg);

                },

                template:'<div>子</div>',

                data(){

                    return {

                        msg:"我饿了"

                    }

                },

            }

        },

    }).$mount("#app"); //手动将vue挂载在#app标签上

</script>

</html>

vue.js通讯----父亲拿儿子的数据的更多相关文章

  1. vue.js组件之间的通讯-----父亲向儿子传递数据，儿子接收父亲的数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  3. Vue.js使用-组件示例（实现数据的CRUD）

    1.业务场景 用户(姓名,年龄,性别)的增删改查 2.数据格式 定义字段,name:字段名称,iskey:是否主键(添加,修改数据标志),dataSource:可选列表(下拉框选项) columns: ...

  4. Vue.js 2.0 跨域请求数据

    Vuejs由1.0更新到了2.0版本.HTTP请求官方也从推荐使用Vue-Resoure变为了 axios .接下来我们来简单地用axios进行一下异步请求.(阅读本文作者默认读者具有使用npm命令的 ...

  5. vue.js 利用SocketCluster实现动态添加数据及排序

    直接上代码 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  6. Vue.js中滚动条加载更多数据

    本文章参考:http://www.cnblogs.com/ssrsblogs/p/6108423.html 分析:1.需要判断滚动条是否到底部: 需要用到DOM的三个属性值,即scrollTop.cl ...

  7. Vue.js中data,props和computed数据

    data data 是Vue实例的数据对象.Vue将会将data 的属性转换为 getter/setter, 也就是用Object.defineProperty方法(在官网里面有深入响应式原理里面具体 ...

  8. vue.js数据可以在页面上渲染成功却总是警告提示某个字段“undefined”未定义

    最近在开发公司的一个后端管理系统,用的是比较流行的vue框架.在开发过程中,总是出现各种各样的报错问题,有警告的,有接口不通的,有自己马虎造成的低级错误的等等,这些错误在一些老司机面前分分钟解决,但今 ...

  9. 0基础菜鸟学前端之Vue.js

    简介:0基础前端菜鸟,啃了将近半月前端VUE框架,对前端知识有了初步的了解.下面总结一下这段时间的学习心得. 文章结构 前端基础 Vue.js简介 Vue.js常用指令 Vue.js组件 Vue.js ...

随机推荐

  1. 10.9NOIP模拟题

    /* big模拟 细节不少 remove表示这个玩意儿在这一秒有没有移动 注意在一秒内所有小葱一起移动,所以如果一个一个处理 别忘了“错位”这种情况 */ #include<iostream&g ...

  2. jQuery插件之jqzoom的使用和参数设置

    jqzoom是一款基于jQuery的图片方法插件. 使用方法:1.引入jQuery与jqzoom,jqzoom.css 2.准备两张一大一小大小相同的图片,小图片放在<img>标签的&qu ...

  3. 乐搏讲自动化测试-python语言特点及优缺点（5）

    相信小伙伴们都知道,随着软件测试行业的发展和进步自动化测试已经成为必然.在竞争日益激烈的市场环境中也是你升职加薪的利器. 所以,小编决定从今天起!将要系统.连续.高质量的持续更新「整套自动化测试」文章 ...

  4. java 序列化和反序列化数据

    使用ObjectOutputStream 序列号原始数据和对象数据,使用ObjectInputStream 反序列化 使用字节存储数据,可以将序列化的数据存储到硬盘上,或输出到网络上 package ...

  5. SQL 索引篇

    索引介绍: 1.索引是对数据库表中一列或多列的值进行排序的一种结构,使用索引可快速访问数据库表中的特定信息. 数据库索引好比是一本书前面的目录, SQL Server的B树结构 2.加快数据库的查询速 ...

  6. 题解报告：poj 3669 Meteor Shower（bfs）

    Description Bessie hears that an extraordinary meteor shower is coming; reports say that these meteo ...

  7. 用 jQuery 实现简单倒计时功能

    问题场景:假设某个活动截止时间给定了,现在需要开发一个页面可以自动刷新距离活动截止时间还剩多少天? <!DOCTYPE html> <html xmlns="http:// ...

  8. Java虚拟机内存详解

    概述 Java虚拟机会自动管理内存,不容易出现内存泄漏和内存溢出问题.Java虚拟机会在执行过程中将管理的内存分为若干个不同的数据区域. 运行时数据区域 在jdk1.8之前的版本与1.8版本略有不同, ...

  9. 【ZT】在微信上有哪些高情商的说话方式 | M周刊（听语音需要60秒，看文字只需10秒）

    https://baijiahao.baidu.com/s?id=1590547145580792217&wfr=spider&for=pc https://yuedu.baidu.c ...

  10. 如何快速排查解决Android中的内存泄露问题

    概述 内存泄露是Android开发中比较常见的问题,一旦发生会导致大量内存空间得不到释放,可用内存急剧减少,导致运行卡顿,部分功能不可用甚至引发应用crash.对于复杂度比较高.多人协同开发的项目来讲 ...