Vue父子组件之间互相传值

一，父组件传值给子组件

父组件

<template>
    <children :childrenVal='parentVal'></children>
</template>

<script>
import children from "@/components/children"
export default {
    data(){
        return {
            parentVal:'我是父组件的值'
        }
    },
    components:{
        children
    }
}
</script>

子组件

<template>
  
</template>

<script>
export default {
    props:['childrenVal']
}
</script>

在父组件引用子组件的标签中用:（v-bind）自定义属性，将父组件的值传到子组件中，在子组件中，用props接收父组件传过来的值。

二， 子组件传值给父组件

子组件里面是一个按钮，里面定义一个点击事件@click=‘children’,点击按钮触发children方法，在方法里用this.$emit('children',传的值)

<template>
  <button @click="children"></button>
</template>

<script>
export default {
  data(){
    return {
      message:'我是子组件的信息'
    }
  },
    methods:{
      children(){
        this.$emit('children',this.message)
      }
    }
}
</script>

在父组件中，用v-on定义children事件，当在子组件的children被执行时，父组件中的parent的方法就会被执行

<template>
  <button @click="children"></button>
</template>

<script>
export default {
  data(){
    return {
      message:'我是子组件的信息'
    }
  },
    methods:{
      children(){
        this.$emit('children',this.message)
      }
    }
}
</script>