vue 父子之间传值

一、父---子

父：

<template>
  <div class="hello">
    <myChildren :dataMessage = "dataShowOrnOt"></myChildren><!--3、传值:dataMessage = "dataShowOrnOt" 第一个参数是子组件接受的值，第二个参数就是你要传的父组件中的值-->
  </div>
</template>

<script>
  import myChildren from './myChildren.vue'//1、引入
  export default {
    name: 'HelloWorld',
    data () {
      return {
        dataShowOrnOt: false//4、定义要传给子组件的值
      }
    },
    components: {
      [myChildren.name]: myChildren//2、引入
    }
  }
</script>

子：

<template>
  <div v-show="dataMessage">//2、使用
    <div>子组件显示内容</div>
  </div>
</template>

<script>
  export default {
    name: 'myChildren',
    props: ["dataMessage"],//1、prop定义 这个名称是父组件传的，要对应的
    data () {
      return {
      }
    }
  }
</script>

二、子--父（子组建到父组件传值vue是不允许直接在自组件直接修改的，会报警告，所以要是想修改父组件中的值就必须发射一个事件给父组件然后在父组件中进行修改）

子：

<template>
  <div>
    <div @click="sureClick">确定</div>//1、子组件中的触发事件
  </div>
</template>

<script>
  export default {
    name: 'myChildren',
    data () {
      return {
      }
    },
    methods: {
      sureClick () {
        this.$emit("parentProp", false)//2、触发父组件，第一个参数是父组件事件名字、第二个参数是传给父组件的值
      }
    }
  }
</script>

父：

<template>
  <div class="hello">
    <myChildren  @parentProp="clickP"></myChildren><!--1、父组件事件名字就是子组件触发所写的名字, 第一个参数是子组件写的触发事件，名字要和子组件传过来的一致，不能随便写，第二个参数是自己定义的一个参数，可以随意定义-->
  </div>
</template>

<script>
  import myChildren from './myChildren.vue'
  export default {
    name: 'HelloWorld',
    data () {
      return {
        dataShowOrnOt: false
      }
    },
    methods: {
      clickP (boolean) {//子组件发射后，父组件所触发的事件
        this.dataShowOrnOt = boolean
      }
    },
    components: {
      [myChildren.name]: myChildren
    }
  }
</script>