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 相关文章推荐
jQuery 使用手册(一)
Sep 23 Javascript
jMessageBox 基于jQuery的窗口插件
Dec 09 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
Apr 18 Javascript
electron实现静默打印的示例代码
Aug 12 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 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
PHPlet在Windows下的安装
2006/10/09 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
详解Yii2.0 rules验证规则集合
2017/03/21 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
简单的js表单验证函数
2013/10/28 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
angular4中引入echarts的方法示例
2019/01/29 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
Django自定义分页效果
2017/06/27 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
html5简单示例_动力节点Java学院整理
2017/07/07 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
super()与this()的区别
2016/01/17 面试题
《纸船和风筝》教学反思
2014/02/15 职场文书
环保建议书400字
2014/05/14 职场文书
学校募捐倡议书
2014/05/14 职场文书
房地产开发项目建议书
2014/05/16 职场文书
教师党的群众路线对照检查材料
2014/09/24 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
《初涉尘世》读后感3篇
2020/01/10 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python