Vue的踩坑集☞ —— 父组件传值给子组件,子组件改变值后再传回去
一个基本的父传子demo
parent.vue
<template> <div> <Child text="hi"></Child> </div> </template> <script> import Child from './child.vue' export default { components:{ Child } }
child.vue
<template> <div> {{text}} </div> </template> <script> export default { props:{ text:{ type:String, default:'hello world' } } } </script>
(重点已标记)
那么如果在子组件中改变从父组件传过来的值并且再传回去呢~????
parent.vue
<template> <div> 父组件:{{text}} <Child @onchange="onchange" :text="text"></Child> </div> </template> <script> import Child from './child.vue' export default { data(){ return { text:'heihei' } }, components:{ Child }, methods:{ onchange(val){ this.text=val; } } } </script>
child.vue
<template> <div> 子组件:{{newtext}}<br> <button @click="commit">改变值</button> </div> </template> <script> export default { data(){ return{ newtext:this.text } }, watch:{ text(val){ this.newtext = val; //监听text,把text赋给newtext }, newtext(val){ this.$emit('onchange',val) //传给父组件 } }, methods:{ commit(){ this.newtext = 'haha' } }, props:{ text:{ type:String, default:'hello world' } } } </script>
以上!
- 上一篇 »React中父子组件通信
- 下一篇 »vue父子组件动态传值的几种方式及注意问题详解?