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 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
jQuery提交表单ajax查询实例代码
Oct 07 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
bootstrap Table服务端处理分页(后台是.net)
Oct 19 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
解决vue移动端适配问题
Dec 12 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
Apr 17 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
微信小程序收藏功能的实现代码
Jun 19 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
PHP var_dump遍历对象属性的函数与应用代码
2010/06/04 PHP
PHP中的string类型使用说明
2010/07/27 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
js 动态选中下拉框
2009/11/26 Javascript
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
详解Nodejs之npm&amp;package.json
2017/06/15 NodeJs
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
微信小程序如何使用云开发
2019/05/17 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
一文详述 Python 中的 property 语法
2020/09/01 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
香蕉共和国Banana Republic官网:美国GAP旗下偏贵族风格服饰品牌
2016/11/21 全球购物
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
技能比赛获奖感言
2014/02/14 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
实习介绍信模板
2015/01/30 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
python如何做代码性能分析
2021/04/26 Python
python 字典和列表嵌套用法详解
2021/06/29 Python