Vue中父子组件通讯之todolist组件功能开发


Posted in Javascript onMay 21, 2018

一、todolist功能开发

Vue中父子组件通讯之todolist组件功能开发

<div id="root">
  <div>
   <input type="text" v-model="inputValue">
   <button @click="handleSubmit">提交</button>
  </div>
  <ul>
   <li v-for="(item, index ) of list" :key="index">{{item}} </li>
  </ul>
 </div>
 <script>
 new Vue({
  el:"#root",
  data:{
   inputValue:'',
   list:[]
  },
  methods:{
   handleSubmit:function(){
    this.list.push(this.inputValue);
    this.inputValue='';
   }
  }
 })
 </script>

二、todolist组件拆分

定义组件,组件和组件之间通讯

1、全局组件

<div id="root">
  <div>
   <input type="text" v-model="inputValue">
   <button @click="handleSubmit">提交</button>
  </div>
  <ul>
   <todo-item></todo-item>
  </ul>
 </div>
 <script>
 Vue.component('todo-item',{
  template:'<li>item</li>'
 })
...

2、局部组件

要注册,否则会报错:

vue.js:597 [Vue warn]: Unknown custom element: <todo-item> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="./vue.js"></script>
</head>
<body>
 <div id="root">
  <div>
   <input type="text" v-model="inputValue">
   <button @click="handleSubmit">提交</button>
  </div>
  <ul>
   <todo-item></todo-item>
  </ul>
 </div>
 <script>
 //全局组件
 // Vue.component('todo-item',{
 //  template:'<li>item</li>'
 // })

 var TodoItem={
  template:'<li>item</li>'
 }
 new Vue({
  el:"#root",
  components:{
   'todo-item':TodoItem
  },
  data:{
   inputValue:'',
   list:[]
  },
  methods:{
   handleSubmit:function(){
    this.list.push(this.inputValue);
    this.inputValue='';
   }
  }
 })
 </script>
</body>
</html>

3、组件传值

父组件向子组件传值是通过属性的形式。

<div id="root">
  <div>
   <input type="text" v-model="inputValue">
   <button @click="handleSubmit">提交</button>
  </div>
  <ul>
   <todo-item 
    v-for="(item ,index) of list"
    :key="index"
    :content="item"
   ></todo-item>
  </ul>
 </div>
 <script>
 Vue.component('todo-item',{
  props: ['content'], //接收从外部传递进来的content属性
  template:'<li>{{content}}</li>'
 })
 new Vue({
  el:"#root",
  data:{
   inputValue:'',
   list:[]
  },
  methods:{
   handleSubmit:function(){
    this.list.push(this.inputValue);
    this.inputValue='';
   }
  }
 })
 </script>

三、组件与实例的关系

new Vue()实例

Vue.component是组件

每一个Vue组件又是一个Vue的实例。

任何一个vue项目都是由千千万万个vue实例组成的。

每个vue实例就是一个组件,每个组件也是vue的实例。

四、实现todolist的删除功能

子组件通过发布订阅模式通知父组件。

<div id="root">
  <div>
   <input type="text" v-model="inputValue">
   <button @click="handleSubmit">提交</button>
  </div>
  <ul>
   <todo-item 
    v-for="(item ,index) of list"
    :key="index"
    :content="item"
    :index="index"
    @delete='handleDelete'
   ></todo-item>
  </ul>
 </div>
 <script>
 Vue.component('todo-item',{
  props: ['content','index'], //接收从外部传递进来的content属性
  template:'<li @click="handleDeleteItem">{{content}}</li>',
  methods:{
   handleDeleteItem:function(){
    this.$emit('delete',this.index);
   }
  }
 })
 new Vue({
  el:"#root",
  data:{
   inputValue:'',
   list:[]
  },
  methods:{
   handleSubmit:function(){
    this.list.push(this.inputValue);
    this.inputValue='';
   },
   handleDelete:function(index){
    this.list.splice(index,1);
   }
  }
 })
 </script>

总结

以上所述是小编给大家介绍的Vue中父子组件通讯之todolist组件功能开发,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js操作二级联动实现代码
Jul 27 Javascript
brook javascript框架介绍
Oct 10 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
javascript获取隐藏dom的宽高 具体实现
Jul 14 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
Jun 03 Javascript
Vue header组件开发详解
Jan 26 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
ztree+ajax实现文件树下载功能
May 18 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 #Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 #Javascript
JS实现的文件拖拽上传功能示例
May 21 #Javascript
以v-model与promise两种方式实现vue弹窗组件
May 21 #Javascript
Vue二次封装axios为插件使用详解
May 21 #Javascript
详解vue的diff算法原理
May 20 #Javascript
详解使用vue-admin-template的优化历程
May 20 #Javascript
You might like
php5数字型字符串加解密代码
2008/04/24 PHP
创建数据库php代码 用PHP写出自己的BLOG系统
2010/04/12 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
js获取div高度的代码
2008/08/09 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
详解python3百度指数抓取实例
2016/12/12 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
numpy排序与集合运算用法示例
2017/12/15 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python实现五子棋程序
2020/04/24 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
网站编辑求职信
2013/10/17 职场文书
大学生村官典型材料
2014/01/12 职场文书
学生党员公开承诺书
2014/05/28 职场文书
春游踏青活动方案
2014/08/14 职场文书
就业协议书怎么填
2014/09/15 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
关于观后感的作文
2015/06/18 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书
 Python 中 logging 模块使用详情
2022/03/03 Python
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server