一个基本的父传子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 @οnchange="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>
以上!