vue中子父组件传值

Vue子组件传值给父组件

子组件

<template>
    <div class="app">
       <input @click="sendInfo" type="button" value="给父组件传递值">
    </div>
</template>
<script>
export default {
 
    data () {
        return {
            msg: "我是子组件的值",
        }
    },
     methods:{
         sendInfo(){
             //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
             this.$emit('getInfoMsg',this.msg)
         }
     }
}
</script>

子组件通过this.$emit() 的方式将值传递给父组件
注意： 这里的getInfoMsg()是父组件中绑定的函数名
父组件

<template>
    <div class="app">
        <child @getInfoMsg="getMsg"></child>
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
        return {
            getmsg: ""
        }
    },
    components:{
        child,
    },
    methods:{
            getMsg(data){
                this.getmsg= data
                console.log(this.getmsg)
            }
    }
}
</script>

Vue父组件传值给子组件

父组件

   <template>
      <div>
        <stepcontentone  :type="type"  @next="next"></stepcontentone>
      </div>
    </template>
    <script>
      import stepcontentone from '~/components/dam/child';
      export default {
        components: {
          stepcontentone 
        },
        data() {
    		return {
      			type: "父组件的值1",
    		};
  		},
        methods: {
          next() {
            console.log('父组件的值2');
          }
        }
      };
    </script>

子组件

<template>
      <div>
      	{{this.type}}
        <button @click="getParentMethods()">点击</button>
      </div>
    </template>
    <script>
      export default {
      	props: ["type"],
        methods: {
          getParentMethods() {
            this.$emit('next')
          }
        }
      };
    </script>