<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="vue-2.4.0.js"></script>

</head>

<body>

    <div id="app">

        <login v-bind:parentmsg="msg" @func='getmsgFromSon'></login>

    </div>

    <template id="temp">

        <div>

            <h1>这是组件的模板----{{ parentmsg }}</h1>

            <!-- 子组件通过事件绑定机制向父组件传递消息 -->

            <input type="button" value="向父组件传递消息" @click='sendMes'>

        </div>

    </template>

    <script>

        var login = {

            template: '#temp',

            data() {

                return {

                    msg: "这是子组件中的值，儿子已经长大了，该给爸爸1000元钱了"

                }

            },

            methods: {

                sendMes() {

                    this.$emit('func',this.msg)

                }

            },

            props: ['parentmsg']

        }

        var vm = new Vue({

            el: '#app',

            data: {

                msg: '这是父组件中的值，爸爸有100块钱，儿子你要不？',

                msgFromSon: ''

            },

            methods: {

                getmsgFromSon(data) {

                    this.msgFromSon = data

                    console.log(this.msgFromSon)

                }

            },

            components: {

                login

            }

        });

    </script>

</body>

</html>

Vue组件中的父子传值的更多相关文章

  1. vue组件基础之父子传值

    可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...

  2. vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题

    Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...

  3. vue组件中的样式属性--scoped

    Scoped CSS Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当 ...

  4. Vue组件中引入jQuery

    一.安装jQuery依赖 在使用jQuery之前,我们首先要通过以下命令来安装jQuery依赖: npm install jquery --save # 如果你更换了淘宝镜像,可以使用cnpm来安装, ...

  5. vue组件中使用iframe元素

    需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...

  6. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  7. Vue 组件中 data 为什么必须是函数

    原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...

  8. vue组件中的data为什么是函数？

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

  9. 第七十三篇：解决Vue组件中的样式冲突

    好家伙, 1.组件之间的样式冲突 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题. 举个例子: 我们在Left.vue的组件中添加样式 <templat ...

随机推荐

  1. Directx11教程(12) 禁止alt+enter全屏窗口

    原文:Directx11教程(12) 禁止alt+enter全屏窗口        在D3D11应用程序中,我们按下alt+enter键,会切换到全屏模式.有时候,我们在WM_SIZE中有一些代码,全 ...

  2. 使用哈工大LTP进行文本命名实体识别并保存到txt

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/broccoli2/article/det ...

  3. [转]embedding technic:从SNE到t-SNE再到LargeVis

    http://bindog.github.io/blog/2016/06/04/from-sne-to-tsne-to-largevis/#top

  4. TIJ——Chapter Four:Controlling Execution

    同上一章,本章依然比较简单.基础,因此只是做一些总结性的笔记. 1. 不像C和C++那样(0是假,非零为真),Java不允许用一个数字作为boolean值. 2. C中,为了给变量分配空间,所有变量的 ...

  5. MUI - 解决弹出输入法时页面高度变小导致底部上浮的问题

    解决弹出输入法时页面高度变小导致底部上浮的问题 在有输入框的页面,当输入法弹出的时候,底部元素上浮遮盖了输入框,影响页面美观及功能.查找了一下,页面变窄是不可避免的.即使是设置绝对固定也是不可以的.因 ...

  6. AutoCAD安装失败怎样卸载重新安装AutoCAD，解决AutoCAD安装失败的方法总结

    技术帖:AutoCAD没有按照正确方式卸载,导致AutoCAD安装失败.楼主也查过网上关于如何解决AutoCAD安装失败的一些文章,是说删除几个AutoCAD文件和AutoCAD软件注册表就可以解决A ...

  7. Jmeter If控制器

    "${xxx}"=="1" 或者 "${xxx}"!="2"

  8. ORACLE学习笔记-ORACLE（基本命令）

    --查看VGA信息: show sga; select * from v$sgastat;--可以通过以下几个动态性能视图查看信息: V$sysstat                系统统计信息 V ...

  9. 一个项目看java TCP/IP Socket编程

    前一段时间刚做了个java程序和网络上多台机器的c程序通讯的项目,遵循的是TCP/IP协议,用到了java的Socket编程.网络通讯是java的强项,用TCP/IP协议可以方便的和网络上的其他程序互 ...

  10. python中'0b111'中的b 是什么意思

    https://zhidao.baidu.com/question/987330764742072579.html binary,二进制的意思