zoukankan      html  css  js  c++  java
  • 使用Vue.js进行数据绑定以及父子组件传值

    最近准备快速复习一下Vue,做几个小DEMO来复习一下

    写个todolist

    使用v-model进行数据的双向绑定,当input里面的内容发生变化,vue实例里的inputValue也发生变化,同理当input.value发生变化时input的也会变化

     给按钮绑定的点击事件添加上把input的内容添加到列表数组中,基本的todolist就完成了

     

    接下来把列表项组件化,使用Vue.component新建一个全局组件,使用组件循环列表

    接下父组件通过content变量向子组件传递内容,同时组件内部使用props去接收这个变量

     

    使用vue.component定义的是一个全局组件,接下来把这个全局组件改写成局部组件

    接下来如果子组件需要向父组件传值,即点击每一项item需要在父组件接收到每一项的值和索引,通过获取到的索引把对应点击的哪一项删除

     首先给子组件的模板中绑定一个点击事件

     

    和微信小程序相似, 删除子组件的时候需要把对应的内容传递到父组件,在小程序中使用triggerEvent,而在vue中使用$emit

    改一下代码在vue中v-on可以使用@代替,v-bind可以使用:代替,最终代码如下:

  • 相关阅读:
    Jenkins和pipeline
    Docker摘要
    javascript文件加载模式与加载方法
    Pre-shared key
    持续集成CI相关的几个概念
    Fetch诞生记
    Content Security Policy介绍
    vivalidi 一款由Web技术诞生的Web浏览器
    Javascript async异步操作库简介
    Polymer初探
  • 原文地址:https://www.cnblogs.com/rmty/p/10951233.html
Copyright © 2011-2022 走看看