vue.js  父向子组件传参的实例代码


Posted in Javascript onOctober 29, 2017

1.新建componentA.vue组件,代码如下:

store.js代码如下:

const STORAGE_KEY = 'todos-vue.js'
export default{
  fetch(){
    return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
  },
  save(items){
    window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items));
  }
}

App.vue代码如下:

<template>
 <div id="app">
  <h1 v-text="title"></h1>
  <input v-model="newItem" v-on:keyup.enter="addNew"/>
  <ul>
   <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click='toogleFinish(item)'>
    {{item.label}}
   </li>
  </ul>
  <!-- 使用组件,注意驼峰命名法转化成短线 -->
  <!-- 向自组件传数据 -->
  <Component-a msgfromfather='you die!'></Component-a>
 </div>
</template>
<script>
import Store from './store'
import ComponentA from './components/componentA'  //该组件会被加载到该页面
export default {
 name: 'app',
 data () {
  return {
   title: 'this is a todo list',
   items:Store.fetch(),
   newItem:''
  }
 },
 components:{ //注册组件
  ComponentA
 },
 watch:{
   items:{
    handler(items){   //经过变化的数组会作为第一个参数传入
     Store.save(items)
    },
    deep:true    //深度复制
   }
 },
 methods:{
  toogleFinish(item){
   item.isFinished = !item.isFinished
  },
  addNew(){
   this.items.push({
    label:this.newItem,
    isFinished:false,
   })
   this.newItem = ''
  }
 }
}
</script>
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
.finished{
 text-decoration: underline;
}
</style>

componentA.vue代码如下:

<template>
 <div class="hello">
  <h1>{{msg}}</h1>
  <h2>{{msgfromfather}}</h2>
  <button v-on:click="onClickMe">Click!</button>
 </div>
</template>
<<script>
export default {
 data(){
   return{
     msg:'Hello form component a'
   }
 },
 props:['msgfromfather'],//自组件接收数据
 methods:{
   onClickMe(){
     console.log(this.msgfromfather);
   }
 }
}
</script>
<style scoped>
</style>

点击按钮之后效果图如下:

vue.js  父向子组件传参的实例代码

总结

以上所述是小编给大家介绍的vue.js  父向子组件传参的实例代码,希望对大家有所帮助!

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
javascript基本数据类型和转换
Mar 17 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
Jul 16 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
Element Tooltip 文字提示的使用示例
Jul 26 Javascript
vue.js todolist实现代码
Oct 29 #Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 #Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 #jQuery
bootstrap table sum总数量统计实现方法
Oct 29 #Javascript
vue.js语法及常用指令
Oct 29 #Javascript
基于vue.js快速搭建图书管理平台
Oct 29 #Javascript
JavaScript代码执行的先后顺序问题
Oct 29 #Javascript
You might like
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
JavaScript格式化json和xml的方法示例
2019/01/22 Javascript
vue移动端屏幕适配详解
2019/04/30 Javascript
vuex存储token示例
2019/11/11 Javascript
[01:05:40]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第三场
2014/05/24 DOTA
[40:19]2018完美盛典CS.GO表演赛
2018/12/17 DOTA
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
详解用Python实现自动化监控远程服务器
2019/05/18 Python
django 邮件发送模块smtp使用详解
2019/07/22 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
Python爬虫教程知识点总结
2020/10/19 Python
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
市场营销个人求职信范文
2014/02/02 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
小学生作文评语大全
2014/04/21 职场文书
运动会报道稿300字
2014/10/02 职场文书
药房管理制度范本
2015/08/06 职场文书
车间安全生产管理制度
2015/08/06 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
PyTorch的Debug指南
2021/05/07 Python
2022微信温控新功能上线
2022/05/09 数码科技