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可以使用:代替,最终代码如下:

  • 相关阅读:
    zabbix邮件报警
    简单的带权随机算法
    一、向量
    C#遍历DataSet
    旅游(二)——广州
    旅游(一)——潮州
    LoRa术语
    Linux基础(一)
    Git(二)_基本命令
    Git使用(一)——Cygwin
  • 原文地址:https://www.cnblogs.com/rmty/p/10951233.html
Copyright © 2011-2022 走看看