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

猜你喜欢

转载自www.cnblogs.com/rmty/p/10951233.html