Vue.js组件之间的通信---父子组件之间传递数据

亦凉 2022-12-21 02:28 324阅读 0赞

### 组件之间的通信 ###

*   *  父组件向子组件传递数据（子组件调用父组件中的数据）
     *   *  props
     *  父组件向子组件传递方法（子组件调用父组件中的方法）
     *   *  this.$emit()
     *  子组件向父组件传递数据

组件之间的通信就是组件之件的数据传递，有父组件向子组件传递数据，也有子组件向父组件传递数据.

## 父组件向子组件传递数据（子组件调用父组件中的数据） ##

父组件向子组件传递数据主要是通过属性绑定,把需要传递给子组件的数据，以属性绑定的形式传递到子组件的内部，供子组件使用  
父组件向子组件传递数据之后，子组件也要通过一定方式来接收传递过来数据

Vue提供`props`属性来接收来自父组件的数据

### props ###

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

props的作用：接收父组件传递过来的属性，先在props数组中定义之后才能供子组件使用

用法：

<div id="app">
        <h1>{
       {msg}}</h1>
        <temp1 :parentmsg='msg'></temp1>
    </div>
    <script> new Vue({ el:"#app", data:{ msg:'这是父组件的内容显示' }, methods:{ }, components:{ temp1:{ props:['parentmsg'], template:'<h1>这是子组件===={ {parentmsg}}</h1>' } } }) </script>

**注意：** 使用props属性接收数据之后，template模板中就不能使用`{ {msg}}`来将数据显示在页面上，而是通过`{ {parentmsg}}`来渲染  
![在这里插入图片描述][20201113195014832.png_pic_center]

## 父组件向子组件传递方法（子组件调用父组件中的方法） ##

通过子组件身上自定义绑定的事件，将父组件中的方法赋值给自定义的事件，然后子组件内部通过`this.$emit`这种方式，从而就可以调用父组件中的方法

### this.$emit() ###

语法格式：`this.$emit('自定义事件的名称')` 也可以加其他参数

作用：通过触发自定义事件，来给触发监听事件

用法：

1.  将子组件调用父组件之间的数据先分离出来，这样容易理解
2.  给子组件绑定自定义的事件(`@func`)
3.  将父组件中的方法(`show(){}`)传递给自定义的事件(`@func='show'`)
4.  点击按钮触发`this.$emit()`方法(this.$emit(‘func’))

<div id="app">
        <h1>{
       {msg}}</h1>
        <com1 :parentmsg='msg' @func='show'></com1>
        <h5>{
       {result}}</h5>
    </div>
    <template id="temp1">
        <div>
            <h3>这是子组件的内容:{
       {parentmsg}}</h3>
            
            <input type="button" value="调用" @click='btn'> 
        </div>
    </template>
    <script> var com1={ template:'#temp1', props:['parentmsg'], methods: { btn(){ this.$emit('func') } }, } var vm=new Vue({ el:'#app', data:{ msg:'这是父组件的内容显示', result:'' }, methods: { show() console.log('调用父组件身上的show方法'+data); } }, components:{ com1 } }) </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]

## 子组件向父组件传递数据 ##

*  采用vue提供的方式 传递数据-----this.$emit()
 *  借助于浏览器缓存 H5 本地缓存技术

在上个例子的基础上，实现子组件向父组件传递数据

1.  在`this.$emit()`添加一个参数，即传递的数据
2.  然后在父组件的方法中传递一个形参data，这个data代表从子组件传递过来的数据
3.  最后将数据展现出来

<div id="app">
        <h1>{
       {msg}}</h1>
        <com1 :parentmsg='msg' @func='show'></com1>
    </div>
    <template id="temp1">
        <div>
            <h3>这是子组件的内容:{
       {parentmsg}}</h3>
            
            <input type="button" value="调用" @click='btn'> 
        </div>
    </template>
    <script> var com1={ template:'#temp1', props:['parentmsg'], methods: { btn(){ this.$emit('func',123) } }, } var vm=new Vue({ el:'#app', data:{ msg:'这是父组件的内容显示', result:'' }, methods: { show(data){ this.result = data; console.log('调用父组件身上的show方法'); } }, components:{ com1 } }) </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]

[20201113195014832.png_pic_center]: /images/20221120/a4ccbcff9a0a4b06a1db44d888504567.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/c07fd6d1986344f08bbe5d82b369e579.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/66e2fe308365439094ce4272a7e690b2.png