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

转载于:https://www.cnblogs.com/rmty/p/10951233.html

使用Vue.js进行数据绑定以及父子组件传值相关推荐

vue.js $refs和$emit 父子组件交互
父调子 $refs (把父组件的数据传给子组件) <template><div id="app"><input type="button&q ...
Vue.js组件-组件通信-非父子组件传值以及其他通信方式
非父子组件传值非父子组件指的是兄弟组件或完全无关的两个组件兄弟组件兄弟组件可以通过父组件进行数据中转,简单来讲,A是父组件,BC是两个兄弟组,那么我们可以先B传给A,再A传给C.示例如图: Ev ...
vue中父子组件先后渲染_vue父子组件传值（子传父，非父子组件传值）
1. 子组件向父组件传值子组件: <template><div>子组件:<span>{{childValue}}</span><!-- 定义一个 ...
父子组建传值_浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue goodsList组件 expor ...
vue学习【非父子组件传值问题（Bus/总线/观察者模式）】
如果两个组件是父子关系,就可以通过props的方式传值. 父组件通过props向子组件传值,子组件通过事件触发向父组件传值那么如果两个组件之间不具备父子关系,该如何传值呢?任何一个网页都可以拆分成几 ...
vue父子组件传值的一些坑（深浅拷贝）
本文章转载:https://www.yht7.com/news/116487 1.问题描述父组件传值给子组件,子组件改变传过来的值后,父组件的值也会跟着改变. 这个问题比较冷门,平时如果对组件通信使 ...
Vue非父子组件传值
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.非父子组件传值二.事件总线 2.$attrs / listeners VueX是笔者认为最稳定的非父子传值的方法 ...
vue中非父子组件传值
vue中非父子组件传值我们使用 $emit发送数据使用 $on监听数据vue非父子组件传值1 创建公共实例化对象const bus=new Vue()2 在需要发送数据的组件中自定义方法使用bus ...
Vue 进阶组件实战应用 -- 父子组件传值的应用实例（子父组件传值的两种触发方式）
基础的子组件和父组件通信已经搞定了,可以看此博客父子组件传值基础应用需求现在需求是在一个父页面引用子组件,不只是要实现基本的父子组件传值.并且子组件给父组件传值的触发条件要在父页面触发. 目前小 ...

使用Vue.js进行数据绑定以及父子组件传值

使用Vue.js进行数据绑定以及父子组件传值相关推荐

最新文章

热门文章