子组件给父组件传值

子组件给父组件传值

视觉效果：

父组件代码：

<template>

 <div id="fuqin">
  <top title="父子组件"></top>
   <p>这个是父组件</p>
    <p>{{txt}}</p>
     <!-- 这里的 func是一个函数方法，给子组件调用的-->
    <erzi @func='msgtxt' :txt="txt"> </erzi>
    <br>
    <!-- 等待接收子组件改变的数据-->
     <span>{{msg}}</span>

 </div>
</template>

<script>
import erzi from './erzi.vue'
export default{
  name:'fuqin',
  data(){
    return{
    txt:1,   //这里我想把参数丢给子组件，让子组件改变数据，然后丢回来。
     msg:'默认值' //等待接收子组件修改后的数据

    }
  },
  components:{erzi},
 methods:{
    msgtxt(data){
      this.msg=data;  //接收子组件修改的数据
      console.log(this.msg)
    }
    }

}
</script>

<style>
</style>

子组件代码：

<template>
 <div id="erzi">
 <br>
   <p>这里是子组件</p>
   <!-- 接收父组件来个数据是1-->
   <p>子组件接收数据----{{txt}}</p>
   <!-- 改变父组件传来的数据-->
   <input @click="add()" type="button" value="递增父组件的数据"/>
   <br>
   <!-- 改变好的数据丢回去父组件，发现有报错。-->
   <input @click="send()" type="button" value="修改值后丢给父组件">
 </div>
</template>

<script>
 export default{
   name:'erzi',
   props:['txt'],
   data(){
     return{
    msg:'测试测试'
     }
   },
   methods:{
    add(){
      this.txt++;
    },
    send(){
      //子组件传值给父组件用 $emit方法， func是父组件的函数方法。
      this.$emit('func',this.txt)
    }

   },
   computed:{

   }
 }
</script>

<style>
</style>