1.新建componentA.vue组件，代码如下：

store.js代码如下：

const STORAGE _ KEY=' todos-vue。js ' export default { fetch(){ return JSON。解析(窗口。本地存储。getitem(STORAGE _ KEY)| '[]')}，save(items){ window。本地存储。setitem(STORAGE _ KEY，JSON。stringify(items))；}}App.vue代码如下：

模板div id=' app ' h1 v-text=' title '/h1输入v-model=' new item ' v-: keyup。输入=' addNew '/ul Li v-for=' items '中的项目' v-bind : class=' {成品： item。已完成} ' v-: click=' toogleFinish(item)' { { item。标签} }/Li/ul！-使用组件，注意驼峰命名法转化成短线- !-向自组件传数据-组件-一个msgfromford='你去死吧!'/Component-a/div/templatescript从“”导入存储./store "从导入组件a ./组件/组件一个'//该组件会被加载到该页面导出默认{ name: 'app '，data () { return { title: '这是一个待办事项列表，items:Store.fetch()，newItem:'' }，components 3360 {//注册组件ComponentA }，watch : { items : { handler(items){//经过变化的数组会作为第一个参数传入Store.save(items) }，deep:true //深度复制} }，方法： { toogleFinish(item){ item。is finish=！item.isFinished }，addNew(){ this。物品。推({标签:这个。NewItem，isFinished:false，})这个。NewItem=' ' }/script style # app { font-family : ' Avenir '，Helvetica，Arial，无衬线；-网络套件-字体-流畅：抗锯齿；-moz-OSX-字体-平滑：灰度；文本对齐：中心；颜色： # 2c 3e 50边距-top : 60px；}.完成{文本-装饰：下划线；}/stylecomponentA.vue代码如下：

模板div class=' hello ' h1 { { msg } }/h1 H2 { { msgfromford } }/H2按钮：click=' onClickMe 'Click！/button/div/templatescriptexport default { data(){ return { msg : ' Hello form component a ' } }，prop :[' msgfromford ']，//自组件接收数据方法： { OnClickMe(){ console。日志(这个。msgfromford)；} }}/scriptstyle作用域/style点击按钮之后效果图如下：

总结

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