• vue再次入手(数据传递①)


    准备

    之前使用vue.js完成一个项目之后,对其还是充满着无限兴趣,于是不妨利用碎片时间再次研究一下这个“令人着迷”的js框架。

    1.新建一个基于vue的项目,具体方法不再赘述,请看这里:http://www.cnblogs.com/zhengyeye/p/6245053.htmlhttp://www.cnblogs.com/zhengyeye/p/6245053.html

    2.新建好项目之后,其实为了方便起见,我们也可以设置一下基于webstrom下的vue项目的快速运行方式,可以参考老大写的:http://www.cnblogs.com/vipstone/p/6772813.html

    3.在http://localhost:8080端口可以运行该项目后,我们便继续往下研究。

    再次入手研究,参考:http://www.cnblogs.com/wisewrong/p/6266038.html

    过程

    分为3部分:①父组件向子组件传递数据;②子组件向父组件传递数据;③互通

    1.父组件向子组件传递数据,官网描述:

    组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。

    子组件要显式地用 props 选项声明它期待获得的数据:

    2.在原有项目上再添加新的子组件,目录路径如下:

               9

    3.其中header.vue中主要代码(css样式可以自己写哦~):

              1

              2

    App.vue:

              1

              2

             3

    3.再次运行后,就出现了我们想要的效果(此时是父组件向子组件传递数据的例子)。

    4.子组件向父组件传递数据,官网描述

    我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!

     
    使用 v-on 绑定自定义事件,每个 Vue 实例都实现了事件接口(Events interface),即:
    • 使用 $on(eventName) 监听事件
    • 使用 $emit(eventName) 触发事件

    Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似,但是$on$emit 不是addEventListenerdispatchEvent 的别名。

    另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。不能用$on侦听子组件抛出的事件,而必须在模板里直接用v-on绑定,就像以下的例子:

    子组件login.vue中:

              1

              2

    关于$emit:

    &&:vm.$emit( event, […args] ) 参数:触发当前实例上的事件。附加参数都会传给监听器回调。

    • {string} event
    • [...args]

    父组件App.vue中:

              1

             2

    实现效果:

    1


    未完待续……

  • 相关阅读:
    php编程 之php基础 表单
    javascript/ajax和php 进阶 之 项目实战
    php编程 之 php基础三
    Ajax基础1
    JavaScript编程基础2
    css3基础一
    html超文本标记语言基础一
    表连接、存储过程及基本编程
    五种函数、子查询及分页查询思路
    数据库与表的创建及增删改查
  • 原文地址:https://www.cnblogs.com/zhengyeye/p/7008922.html
Copyright © 2020-2023  润新知