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

<button @click="clickParent">点击</button>
<child ref="mychild"></child>

**注意：**


　　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、父组件传值给子组件**


**父组件：**

**子组件：**

这是子组件 //父亲传过来的值 {{ parentToChild}} //儿子收到后赋值的变量 {{ valueFromParent}}

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


#### 4.子传给父的方法


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


## **方法一、**


**子组件：**

这是子组件

**父组件：**

这是父组件

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


## **方法二、**


### 常用的方法总结下


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


#### $parent方法


**父组件**

**子组件**

#### $emit方法




### 最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！



![](https://img-blog.csdnimg.cn/img_convert/bbe3448beec49dde35916dccaedb72d0.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/ce6ab900204fb105bd27ca5c50ac1d64.webp?x-oss-process=image/format,png)

tn() {
        this.$parent.fatherMethod()
      }
    }
  }
</script>

$emit方法

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

[外链图片转存中…(img-lHdj7LSD-1720103913074)]

[外链图片转存中…(img-6BIrFrp0-1720103913076)]