vue 父子组件传值之（父组件如何触发子组件中的方法，子组件调用父组件中的方法）

文章目录

• 1.什么是组件？
• 2.使用组件
• 3.父传给子的方法
• 4.子传给父的方法

组件

1.什么是组件？

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。

所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。

2.使用组件

示例：

　　子组件：child.vue

<template>
  <div>
        <span>
             child
        </span>
  </div>
</template>
 
<script>
  export default {
    name: "child", // 可写可不写
    props: "someprops",
    methods: {
      parentHandleclick(e) {
        console.log(e)
      }
    }
  }
</script>

父组件：parent.vue

<template>
  <div>
    <button @click="clickParent">点击</button>
    <child ref="mychild"></child>
  </div>
</template>
 
<script>
  import Child from './child';
  export default {
    name: "parent", // 可写，可不写
    components: {
      child: Child
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿嘿嘿");
      }
    }
  }
</script>

注意：

　　1、在子组件中：<div></div>是必须要存在的 

　　2、在父组件中：首先要引入子组件 import Child from './child';

　　3、 <child ref="mychild"></child>是在父组件中为子组件添加一个占位，ref="mychild"是子组件在父组件中的名字

　　4、父组件中 components: {　　是声明子组件在父组件中的名字

       5、在父组件的方法中调用子组件的方法，很重要   this.$refs.mychild.parentHandleclick("嘿嘿嘿");

3.父传给子的方法

前言：

使用vue进行项目开发的时候，免不了组件之间的通信。父组件传递给子组件的值，子组件可以通过props获取。子组件想要改变数据，只能通过触发事件告诉父组件，我要变身了！父组件接收到信号，从而达到改变的目的。

1、父组件传值给子组件

父组件：

<template>
  <div>
    <parent>
      <child :parentToChild="value1"></child>
    </parent>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value1:'父组件的值传给子组件'
    }
  },
  components: {},
  mounted () {},
  watch: {},
  methods: {}
}
</script>

子组件：

<template>
  <div>
    <p>这是子组件
    //父亲传过来的值
    <span>{{ parentToChild}}</span>
    //儿子收到后赋值的变量
    <span>{{ valueFromParent}}</span>
</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      valueFromParent:'',
    }
  },
  components: {},
  props: ['parentToChild'],
  mounted () {},
  watch: {},
  methods: {},
  created(){
    this.valueFromParent = this.parentToChild
  }
}
</script>

 可以看出，父组件要传递给子组件的值为value1，key为parentToChild，在子组件接收时，用props接收。此时，如果打印this.valueFromParent，打印结果会是：父组件的值传给子组件

4.子传给父的方法

 vue是禁止子组件直接向父组件传值的，所以只能通过触发事件来达到目的。

方法一、 

子组件：

<template>
  <div>
    <p>这是子组件</p>
    <button @click="clickEvent">点击按钮</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value1:'这是要传给父组件的值',
      value2:'可以传多个值',
      value3:false,
    }
  },
  components: {},
  props: [],
  mounted () {},
  watch: {},
  methods: {
    clickEvent(){
      this.$emit('sendValueToParent',this.value1,this.value2,this.value3,true);
    }
  },
  created(){}
}
</script>

父组件：

<template>
  <div>
    <p>这是父组件</p>
    <parent>
      <child @sendValueToParent = "getValueFromChild"></child>
    </parent>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  components: {},
  mounted () {},
  watch: {},
  methods: {
    getValueFromChild(value1,value2,value3,value4){
      //打印值分别是
      //value1: 这是要传给父组件的值
      //value2: 可以传多个值
      //value3: false
      //value4: true
    }
  },
  created(){}
}
</script>

从中可以看出，子组件通过sendValueToParent事件方法，向父组件传递了4个值，在父组件的子组件标签里面要写上sendValueToParent这个事件。父组件拿到这四个值是通过getValueFromChild方法。

方法二、 

常用的方法总结下

• $emit
• $parent
• prop
• vuex（vuex代码比较麻烦，不写了，说下步骤吧 dispatch：actions=>commit:mutations）

$parent方法

父组件

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

子组件

<template>
  <div @click="activeBtn"> </div>
</template>
<script>
  export default {
    methods: {
      activeBtn() {
        this.$parent.fatherMethod()
      }
    }
  }
</script>

$emit方法

父组件

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

子组件

<template>
  <div @click="activeBtn"> </div>
</template>
<script>
  export default {
    methods: {
      activeBtn() {
        this.$emit("callFather")
      }
    }
  }
</script>

$prop方法

父组件

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

子组件

<template>
  <div @click="activeBtn"> </div>
</template>
<script>
  export default {
  props:{
    activeSon:  {
        type: Function,
        default: null
      }
  },
    methods: {
      activeBtn() {
        this.activeSon()
      }
    }
  }
</script>

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140