vue 父子组件互传及互调

1. 父组件传子组件

父组件传子组件通过prps
举个栗子：

父组件写法:content为传子组件的内容
<UEditor :content="content" ref="mychild"></UEditor>

子组件通过props接收
props: {
   content: {
     type: String,
     default: function () {
       return "";
     },
   },
 },

2. 子组件传给父组件

子组件通过$emit传给父组件
子组件写法：
methods: {
    childHandleclick() {
      // getHandleContent() 父组件方法
      this.$emit('getHandleContent',this.newContent)
    }
  },
  父组件通过@getHandleContent="getHandleContent"接收
  父组件写法
  <UEditor :content="content" ref="mychild" @getHandleContent="getHandleContent" ></UEditor>
  // 父组件方法
  getHandleContent(content) {
  	//接收子组件回来的值
    this.content = content;
  },

3. 父组件调用子组件

<UEditor :content="content" ref="mychild"></UEditor>
//childHandleclick() 子组件方法
this.$refs.mychild.childHandleclick();

4. 子组件调用父组件

//parentHandleclick() 父组件方法
this.$parent.parentHandleclick();

5. 父组件把方法传入子组件，子组件直接调用
   父组件

<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>