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 相关文章推荐
jquery ajax方式直接提交整个表单核心代码
Aug 15 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
基于Vue实现timepicker
Apr 25 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
javascript运行机制之执行顺序理解
Aug 03 Javascript
vue.js封装switch开关组件的操作
Oct 26 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
微信小程序实现左滑删除效果
Nov 18 Javascript
如何在JavaScript中正确处理变量
Dec 25 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
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
详解PHP的Laravel框架中Eloquent对象关系映射使用
2016/02/26 PHP
PHP7 安装event扩展的实现方法
2019/10/08 PHP
JavaScript TO HTML 转换
2006/06/26 Javascript
Iframe thickbox2.0使用的方法
2009/03/05 Javascript
js 操作select与option(示例讲解)
2013/12/20 Javascript
详解jQuery简单的表单应用
2016/12/16 Javascript
jquery validation验证表单插件
2017/01/07 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
python实现网页链接提取的方法分享
2014/02/25 Python
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python+Django搭建自己的blog网站
2018/03/13 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
pandas 时间格式转换的实现
2019/07/06 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
医生自荐信
2013/10/11 职场文书
服务中心夜班服务员岗位职责
2013/11/27 职场文书
教师个人师德总结
2015/02/06 职场文书
求职自我推荐信
2015/03/24 职场文书
民事代理词范文
2015/05/25 职场文书