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 相关文章推荐
javascript动画效果类封装代码
Aug 28 Javascript
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
Sep 14 Javascript
基于ES6作用域和解构赋值详解
Nov 03 Javascript
Vue.js组件间的循环引用方法示例
Dec 27 Javascript
vue中通过使用$attrs实现组件之间的数据传递功能
Sep 01 Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 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
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
FileUpload上传图片(图片不变形)
2010/08/05 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
js中this用法实例详解
2015/05/05 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
详解AngularJs ui-router 路由的简单介绍
2017/04/26 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
Python的re模块正则表达式操作
2016/05/25 Python
python机器学习实战之树回归详解
2017/12/20 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
pyqt5实现绘制ui,列表窗口,滚动窗口显示图片的方法
2019/06/20 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
TensorFlow——Checkpoint为模型添加检查点的实例
2020/01/21 Python
python求前n个阶乘的和实例
2020/04/02 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
会计师事务所审计实习自我鉴定
2013/09/20 职场文书
材料物理专业大学毕业生求职信
2013/10/15 职场文书
运动会口号16字
2014/06/07 职场文书
旅游饭店管理专业自荐书
2014/06/28 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
工作能力自我评价2015
2015/03/05 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS