标签：ack onchange def cli method ops ihe default bsp
一个基本的父传子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>
以上！
Vue的踩坑集? —— 父组件传值给子组件，子组件改变值后再传回去
标签：ack onchange def cli method ops ihe default bsp
原文地址：https://www.cnblogs.com/tanghm/p/9209336.html
