父子组件通信V1

在vue中，我们可以把一个页面各个部分单独封装起来，做成各种小组件，然后加载，这样的好处是代码维护起来比较容易，重复的代码多处调用！

在一个vue项目中，单文件组件以.vue形式文件命名

每个组件之间，都能建立起关联,然后最后通过webpack打包编译就好

下面有两个组件a.vue（子组件）和b.vue（父组件）

重点：props和emit都是在子组件中定义的哦~~~



<template>
<div>
<h5>我是a组件</h5>
    <button @click="et">点我</button>
    <h2>{{number}}</h2>
  </div>
</template>
<script>
import Vue from 'vue';//引入vue.js文件
export default {
    //props 接受父组件的数据，number  # 父--> 子 ：在子组件中通过props接收父组件，在父组件中通过v-bind（:）向props发送数据。
    props:['number'],
    data () {
        return{
            hello:"你好，我是a组件"
        }
    },
    methods: {
        et() {   #子-->父：通过et触发this.$emit, 给父组件的my-dd属性（父组件以及监听这个my-dd属性）发送this.hello的内容
this.$emit('my-dd',this.hello);
        }
    }
}
</script>


$emit命令简介

官方解释大致的意思是监听回调

下面这张图，充分说明$emit到底在组件通讯中，做啥的！

vue单文件父子组件互相通讯_javascript

 

从这种图看出

子集向父集传输，用emit

父集向子集传输，用props

我们在按钮里面有个点击事件<button @click="et">点我</button>

在我们vue里面，基本所有的函数处理都放在一个函数处理器里面，这里我们可以连接上下文

这个东西就是vue内置的methods

在methods里面我们有一个定义的函数et

 

et() {

　　this.$emit('my-dd',this.hello);

}

我们监听了一个叫做my-dd的东西，我们先不要管他是什么，然后后面，跟了一个参数this.hello

 

下面我们来看组件b.vue(也就是我们定义的a.vue的父组件)



vue单文件父子组件互相通讯_数据_02

<template>
  <div>
    <h5>b组件</h5>
    <!-- 自定义属性大小写不敏感，通过下划线定义 -->
    <c-a :number="datas" @my-dd="dd"></c-a>    //注意这块的datas不是字符串，必须是data中定义的属性，即使要传字符串"datas"，也得在下面定义 datas: "datas"
    <!-- 通过is标签，把组件放到p标签里面 -->
    <!-- <p :is="compontder"></p> -->
  </div>
</template>
<script>
import Vue from 'vue';
import CA from "./a";
export default {
  data () {
    return{
      hello:"你好，我是组件b",
      compontder:"c-a",
      datas:[
        {name:"父组件1"},
        {name:"父组件2"},
        {name:"父组件3"}
      ]
    }
  },
  methods: {
    dd(s) {
    console.log(s);
   }
  },
  components:{
    CA
  },
}
</script>


vue单文件父子组件互相通讯_数据_02


下面我们可以看到b.vue里面我们定义了一个属性@my-dd，这里就是我们子组件a.vue里面监听的东西了

this.$emit('my-dd',this.hello);

现在知道了吧。子组件监听的是父组件的属性

父组件my-dd里面绑定的是一个dd的函数，并且打印参数console.log(s)

里面就是打印了子组件的this.hello

vue单文件父子组件互相通讯_javascript_04

然后我们来看一下组件引入，

import CA from "./a";


我们需要在一个在vue内置的一个components注册

components：{
CA //代表注册了CA组件，可以在页面用这个组件了
}


 <c-a :number="datas" @my-dd="dd"></c-a>

这就是引用子组件a.vue了

并且向子组件传递了一个属性number="datas"（通过v-bind传递的）

也就是我们的数据datas

我们在子组件中接收到了

props:['number']接收

vue单文件父子组件互相通讯_h5_05

在这里，我们知道了子组件，父组件之间的通讯了

 

watch监听机制传递父子数据

以上是mounted之后通过手工的方式父子之间通信

如果是在页面初始化的时候自动进行父子之间通信（具体是父组件向子组件传递数据），这个时候要传递的数据必须在created的时候就准备好，如果是在mounted的时候准备数据，子组件是收不到父组件的数据的

原因：父子组件通信的时间是在created之后，mounted之前！！！

（备注：这个是错误的！！！！！！！！！！！！！！）

正确思路：如下图的过程只是渲染，父子组件通信的时间是，当父组件通过 冒号绑定的数据发生变化的时候就会给子组件通信，即使已经mounted了，只要父组件中冒号绑定的属性发生了变化，这个变化就会实时的传递给子组件，在子组件中可以通过 监听watch的机制，来实现当数据变化的时候做对应的逻辑（这个watch可以当做父子组件通信的钩子函数使用！！！）vue单文件父子组件互相通讯_数据_06

 


父子组件通信V2

​​​​

vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率，减少代码量。但是使用组件最大的难点就是父子组件之间的通信。

子通信父

父组件



<template>
  <div class="parent">
    我是父组件
    <!--父组件监听子组件触发的say方法，调用自己的parentSay方法-->
    <!--通过:msg将父组件的数据传递给子组件-->
    <children :msg="msg" @say="parentSay"></children>
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  data () {
    return {
      msg: 'hello, children'
    }
  },
  methods: {
      // 参数就是子组件传递出来的数据
      parentSay(msg){
          console.log(msg) // hello, parent
      }
  },

  // 引入子组件
  components:{
      children: Children
  }
}
</script>


子组件



<template>
  <div class="hello">
    <div class="children" @click="say">
      我是子组件
      <div>
        父组件对我说：{{msg}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      //父组件通过props属性传递进来的数据
      props: {
          msg: {
              type: String,
              default: () => {
                  return ''
              }
          }
      },
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },

      methods: {
          // 子组件通过emit方法触发父组件中定义好的函数，从而将子组件中的数据传递给父组件
          say(){
              this.$emit('say' , this.childrenSay);
          }
      }
  }
</script>


子组件使用$emit方法调用父组件的方法，达到子通信父的目的。

 

父通信子

父组件

新的发现，可以直接在父组件中调用子组件的函数，在爷-父-孙的关系中，父可以直接调用孙中的函数​​​​​

父组件



<!--Html-->
<template>
   <!--父组件触发click方法-->
  <div class="parent" @click="say">
    我是父组件
    <!--通过ref标记子组件-->
    <children ref="child"></children>
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  data () {
    return {
        msg: "hello,my son"
    }
  },
  methods: {
      // 通过$refs调用子组件的parentSay方法
      say(){
         this.$refs.child.parentSay(this.msg);
      }
  },

  // 引入子组件
  components:{
      children: Children
  }
}
</script>


子组件



<template>
  <div class="hello">
    <div class="children" >
      我是子组件
      <div>
        父组件对我说：{{msg}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      data () {
        return {
            msg: ''
        }
      },

      methods: {
          // 父组件调用的JavaScript方法parentSay
          parentSay(msg){
              this.msg = msg;
          }
      }
  }
</script>


父组件通过​​$refs​​调用子组件的方法。

以上就是父子组件通信的方式，父子组件传递数据直接用props，或者使用​​$emit​​和​​$refs​​依靠事件来传递数据。

父子组件通信提升篇

上文中，子通信父是在子中触发点击事件然后调用父组件的方法，父通信子是在父中触发点击事件调用子组件的方法。但是实际情况中可能存在子通信父时子组件不允许有点击事件而事件在父中或者父通信子时点击事件在子组件中。

子通信父时击事件在父组件

这种情况其实很常见，例如提交一个表单时表单的内容为子组件，而保存按钮在父组件上。此时点击保存按钮想要获取子组件表单的值。这种情况下已经不单单是子通信父和父通信子了，需要将两者结合在一起使用才能完成整个通信过程。

实现的思路是在父组件中点击事件时，先通过父子通信调用子组件的方法，然后在子组件中的该方法里使用子父通信调用父组件的另一个方法并将信息传递回来。以下是代码演示：

父组件



<template>
  <div class="parent" @click="getData">
    我是父组件
    <!--父组件监听子组件触发的transData方法，调用自己的transData方法-->
    <!--通过ref标记子组件-->
    <children ref="child" @transData="transData"></children>
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  data () {
    return {
      msg: 'hello, children'
    }
  },
  methods: {
      getData(){
          // 调用子组件的getData方法
          this.$refs.child.getData();
      },
      // 参数就是子组件传递出来的数据
      transData(msg){
          console.log(msg) // hello, parent
      }
  },

  // 引入子组件
  components:{
      children: Children
  }
}
</script>


子组件



<template>
  <div class="hello">
    <div class="children" >
      我是子组件
      <div>
        子组件的数据：{{childrenSay}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },
      methods: {
          // 子组件通过emit方法触发父组件中定义好的函数，从而将子组件中的数据传递给父组件
          getData() {
              this.$emit('transData' , this.childrenSay);
          }
      }
  }
</script>


另一种情况思路也和这个一样，基础就在与父通信子和子通信父的灵活运用。


做有积累的事~~