VUE父子组件

父页面
‘<div class=“parent” @parentAction=“actionDetail”>
actionDetail（msg）{
console.log(msg);
}’

子页面调用父页面的方法
this.$emit(“parentAction”，“我想说的话”)

父组件

<template>
  <div class="parent">
    我是父组件
    <!--父组件监听子组件触发的parentSay方法，调用自己的parentSayAction方法-->
    <!--通过:msg将父组件的数据传递给子组件-->
    <children :msg="msg" @parentSay="parentSayAction"></children>
  </div>
</template>

<script>

import Children from './children.vue'

export default {
  data () {
    return {
      msg: 'hello, children'
    }
  },

  methods: {
      // 参数就是子组件传递出来的数据
      parentSayAction(msg){
          console.log(msg) // hello, parent
      }
  },

  // 引入子组件
  components:{
      children: Children
  }
}
</script>

**

子组件

**

<template>
  <div class="hello">
    <div class="children" @click="childrenSay">
      我是子组件
      <div>
        父组件对我说：{{msg}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      //父组件通过props属性传递进来的数据
      props: {
          msg: {
              type: String,
              default: () => {
                  return ''
              }
          }
      },
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },

      methods: {
          // 子组件通过emit方法触发父组件中定义好的函数，从而将子组件中的数据传递给父组件
          childrenSay(){
              this.$emit('parentSay' , this.childrenSay);
          }
      }
  }
</script>

父组件通过 prop 给子组件下发数据，
子组件通过$emit触发事件给父组件发送消息

父组件主动获取子组件的数据

1.this.$children用来访问子组件实例，要知道一个组件的子组件可能是不唯一的，所以它的返回值是数组。
2.子组件的时候直接定义一个ref

<HelloWorld ref="hello" :message="message"></HelloWorld>
这样就可以通过this.$refs获取所需要的的数据
this.$refs.hello.属性
this.$refs.hello.方法

子组件主动获取父组件中的数据

1.this.$parent.属性
  this.$parent.方法