我们使用子组件传递值给父组件使用 $emit

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        *{

            padding: ;

            margin: ;

        }

        .main{

            width: 200px;

        }

        .head{

            width: 200px;

            height: 80px;

            background-color: purple;

        }

        .main2{

            width: 200px;

            height: 300px;

        }

        .main2 .aside{

            float: left;

            width: %;

            height: %;

            background-color: green;

        }

        .main2 .content{

            float: left;

            width: %;

            height: %;

            background-color: red;

        }

    </style>

</head>

<body>

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

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

    <script type="text/javascript">

        Vue.component('Vbtn',{

            template:`

                <button>按钮</button>

            `

        });

        var Vcontent = {

               template:`

                <div class='content'>我是内容组件

                    <ul>

                        <li v-for = '(item,index) in posts'>

                            <h3>{{item.title}}</h3>

                            <h4>{{item.content}}</h4>

                        </li>

                    </ul>

                </div>

            `,

        props:['posts']

           }

           var Vaside = {

               template:`

                <div class='aside'>我是侧边栏组件

                </div>

            `

           };

        var Vheader  = {

            template:`

                <div class='head'>

                    我是头部组件

                    <button @click = 'changeFontSize'>字体变大</button>

                </div>

            `,

            methods:{

                changeFontSize(){

                    this.$emit('change')

                }

            }

        };

        // 1.声明局部组件 App入口组件

        var App  = {

            template:`

                <div class='main' :style = '{fontSize:postFontSize+"em"}'>

                    <Vheader @change = 'changeHandler'/>

                    <div class = 'main2'>

                        <Vaside />

                        <Vcontent  :posts = 'posts'/>

                    </div>

                </div>

            `,

            methods:{

                changeHandler(){

                    this.postFontSize+=.;

                }

            },

            data(){

                return {

                    posts:[

                    {id:,title:"我的第一个学习框架",content:'vue'},

                    {id:,title:"我的第二个学习框架",content:'react'},

                    {id:,title:"我的第三个学习框架",content:'angular'}

                    ],

                    postFontSize:

                }

            },

            components:{

                Vheader,

                Vaside,

                Vcontent

            }

        };

        new Vue({

            el:'#app',

            // 3.使用

            template:'<App></App>',

            data(){

                return {

                }

            },

            // 2.挂载组件

            components:{

                App

            }

        });

    </script>

</body>

</html>

效果：

分析：

vue $emit 子传父的更多相关文章

  1. vue 组件之间相互传值 父传子 子传父

    1.父传子 把要传入的值放到父标签里  子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...

  2. Vue父子组件传值 | 父传子 | 子传父

    父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...

  3. Vue ---- 组价 组件化 子传父 父传子

    目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...

  4. vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值

    首先文字简单撸一下 父子传子   -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父   ------在父组件升上自定义一个方法,在子组件里通过this ...

  5. vue子传父、父传子

    子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...

  6. Vue-组件传值：子传父和兄弟组件间常见的传值方式

    前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...

  7. vue传参子传父

    vue子传父用$emit实现 1.文件目录结构 2.parent父组件内容 <template> <div class="wrap"> <div> ...

  8. Blazor和Vue对比学习（基础1.4）：事件和子传父

    Blazor和Vue的组件事件,都使用事件订阅者模式.相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点.要突破这个难点,一是要熟悉事件订阅模式<其实不难& ...

  9. vue组件之间互相传值：父传子，子传父

    今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记- 一般页面的视图App.vue应为这样 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.v ...

随机推荐

  1. Python第五节 元组

    Python第八节 元组补充 元组从形式上看,和列表唯一不同的在于,列表是中括号,元组是小括号 元组内的元素不可更改 一. 创建 创建直接在小括号内写元素,用逗号隔开就好 创建空元祖只写一个小括号 元 ...

  2. cordova-plugin-alipay-v2使用篇（更新至20170725）（亲测可用）

    cordova-plugin-alipay-v2使用篇(更新至20170725)(亲测可用) alipaySdk已更新至20170725版本 支付宝WS_APP_PAY_SDK_BASE_2.0 &l ...

  3. RPC协议的介绍

    根据网上搜索的一些资料摘抄汇总的,如果有误,欢迎斧正. 早期单机时代,一台电脑上运行多个进程,大家各干各的,老死不相往来.假如A进程需要一个画图的功能,B进程也需要一个画图的功能,程序员就必须为两个进 ...

  4. ubuntu安装及破解WebStorm11

    ubuntu安装及破解WebStorm11 下载地址:http://www.jetbrains.com/webstorm/download/#section=linux-version 1.qingy ...

  5. react 数据发生变化，页面改变的原理

    数据发生变化,页面改变的原理: 比较虚拟的dom 不怎么损耗性能,真实的dom比较会损耗性能 1.state 数据 2.jsx 模板 3.生成虚拟的dom 3.数据和模板结合,生成虚拟的dom 4.用 ...

  6. Eclipse快速生成一个JavaBean类的方法

    原文: https://jingyan.baidu.com/article/948f5924156866d80ff5f921.html Eclipse快速生成一个JavaBean类的方法 听语音 | ...

  7. Yii2使用PHPExcel读取excel

    个人使用过程中保存一些使用PHPExcel的经验,以便后来翻阅:与PHP的Yii框架结合,可以轻松使用.而且根本不用网上所说的修改Yii的自动加载文件等方法.具体使用方法:下载phpoffice ht ...

  8. 关于Kerberos协议流程的总结

    Kerberos协议工作原理分析 这里面借用一下师傅们的图来说明一下    Kerberos协议的流程大致如下(假设A要获取对Server B的访问权限) 第一步(KRB_AS_REQ) 这一步客户 ...

  9. NX二次开发-Block UI C++界面Body Collector(体收集器)控件的获取(持续补充)

    Body Collector(体收集器)控件的获取 NX9+VS2012 #include <uf.h> #include <uf_obj.h> UF_initialize() ...

  10. psql内部命令及对应sql语句

    \?: 查看所有帮助  \l: 查看所有数据库  SELECT d.datname as "Name",       pg_catalog.pg_get_userbyid(d.da ...