父子组件数据传递

一、父组件向子组件传递数据

1.1 父组件向子组件传递数据，使用props属性的方式

在子组件中使用props属性进行声明

二、子组件向父组件传递数据

2.1 通过组件的$emit方法；

第一个参数是自定义事件的名字，后面的参数是从子组件传递给父组件的数据，是可选的。要传递几个数据，就将这几个数据作为参数放进该命令中。

// 父组件
<template>
  <div>
    <child ref="child" @childMethod='handleClick'></child>
  </div>
</template>
<script>
  import child from './components/child';
  export default {
    components: {
      child
    },
    methods: {
      handleClick(data) {
        console.log('子组件向父组件传递的数据', data);
      }
    }
  };
</script>

// 子组件
<template>
  <div @click="childMethod">
    子组件按钮
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('childMethod', "子组件传递给父组件的数据~");
      }
    }
  };
</script>

三、父组件调用子组件方法

3.1 通过ref直接调用子组件的方法；

// 父组件
<template>
  <div>
    <child ref="child"></child>
    <Button @click="handleClick">点击调用子组件方法</Button>
  </div>
</template>
<script>
  import child from './components/child';
  export default {
    components: {
      child
    },
    methods: {
      handleClick() {
        this.$refs.child.childMethod();
      }
    }
  };
</script>

// 子组件
<template>
  <div>
    子组件
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        console.log('父组件调用子组件方法');
      }
    }
  };
</script>

3.2 通过组件的$emit、$on方法；

// 父组件
<template>
  <div>
    <child ref="child"></child>
    <Button @click="handleClick">点击调用子组件方法</Button>
  </div>
</template>
<script>
  import child from './components/child';
  export default {
    components: {
      child
    },
    methods: {
      handleClick() {
        this.$refs.child.$emit("childMethod"); //子组件$on中的名字
      }
    }
  };
</script>

// 子组件
<template>
  <div>
    子组件
  </div>
</template>
<script>
  export default {
    mounted() {
        this.$nextTick(function() {
            this.$on('childMethod', function() {
                console.log('父组件调用子组件方法');
            });
        });
     }
  };
</script>

四、子组件调用父组件方法

4.1 this.$parent.event；

// 父组件
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from './components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
</script>

// 子组件
<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

4.2 通过组件的$emit方法；

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

// 子组件
<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>