vue.js 父向子组件传参的实例代码
2017-10-29 11:44
573 查看
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 父向子组件传参的实例代码,希望对大家有所帮助!
您可能感兴趣的文章:
相关文章推荐
- Extjs单独定义各组件的实例代码
- React组件之间的通信的实例代码
- Vuejs 实现简易 todoList 功能 与 组件实例代码
- AspJpeg组件实现远程图片保存的实例完整代码
- vue2.0实现前端星星评分功能组件实例代码
- 基于vue实现swipe轮播组件实例代码
- Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
- vue.js模仿京东省市区三级联动的选择组件实例代码
- 微信小程序 radio单选框组件详解及实例代码
- Vue自定义toast组件的实例代码
- iOS实现支持小数的星星评分组件实例代码
- asp水印组件之AspJpeg的结合代码实例
- vue.js实现仿原生ios时间选择组件实例代码
- vue.js 实现评价五角星组件的实例代码
- Reactjs实现通用分页组件的实例代码
- JSP使用Common FileUpload组件实现文件上传及限制上传类型实例代码
- Vuejs 组件――props数据传递的实例代码
- lhgDialog弹出窗口组件基础示例(实例代码)
- 微信小程序 video组件详解及实例代码