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>