1,子组件给父组件传值需要经过一个事件触发,用this.$emit进行传值,两个参数,第一个是在父组件接受这个方法的方法名称,另一个 就是给父组件的值
1 <template> 2 <div> 3 我是son组件,我要给父亲:{{list}} 4 <p><button @click="toFather">点击给父亲</button></p> 5 </div> 6 </template> 7 8 <script> 9 export default { 10 data () { 11 return { 12 list:"钱" 13 } 14 }, 15 methods: { 16 toFather(){ 17 //giveValue: 是父组件指定的传数据绑定的函数,this.list:子组件给父组件传递的数据 18 this.$emit("giveValue",this.list) 19 } 20 } 21 } 22 23 </script>
2,父组件需要用一个方法去接收子组件传来的回调方法,然后将参数付给自己的data里的属性
在子组件标签里格式 @子组件方法=“父组件方法”
1 <template> 2 <div> 3 <h1>我是父组件,要问儿子拿个数字:<span style="color:orange">{{num}}</span></h1> 4 <Son @giveValue="getValue"></Son> 5 </div> 6 </template> 7 8 <script> 9 import Son from './son' 10 export default { 11 data () { 12 return { 13 num:'' 14 } 15 }, 16 components: { 17 Son 18 }, 19 methods: { 20 getValue(newValue){ 21 this.num = newValue 22 } 23 } 24 } 25 </script>