Vue2.x中父子组件通信

在这里就引用之前写的项目,举个栗子

先贴上代码

list.vue组件

<template>
  <div class="list">
    <ul v-for="(friend, i) in friendList">
      <li @click="setContact(i)"> 
        <p class="name">{{friend.username}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["friendList"],
  methods: {
  // 创建一个setContact方法,把当前点击的名称传给父组件
    setContact(index) {
      this.$emit("set-contact", this.friendList[index]);
    },
  // 创建一个方法,获取参数
    getList(list) {
      console.log(list);
      console.log(typeof this.$parent);// object
    },
  },
};
</script>
 

父组件chat.vue

通过props父传子,通过$emit子传父

在父组件中引用子组件,再把数据通过参数传给子组件,如果需要子组件在返回数据的话,父组件可以通过自定义事件的形式,接收数据。

如下图,父组件通过friendList传给子组件,子组件用props中的friendList接收,然后显示出来,当点击某个li的时候,子组件就通过$emit把当前点击li的username传给父组件,父组件通过getcontact接收。

image-20210517200059214

image-20210517200215929

注意:父组件中@set-contact中的set-contact,必须与子组件中this.$emit(“set-contact”, this.friendList[index])中set-contact一致。

在子组件中利用props接收父组件中传过来的值,相当于形参,也可以自己定义接收参数类型,比如这样:

效果图

image-20210517201148120

当我们点击某个item时,比如cat,控制台就会显示,就会显示子组件返回的数据了。

image-20210517201241762

通过$refs

通过在父组件中的子组件中声明ref,那么这个ref就指向子组件实例

image-20210517210505296

接下来,就可以通过this.$refs.名称 的形式调用子组件的方法。

如下图,通过在父组件中的mounted中调用this.$refs.friends可以看到一个vue实例对象,这个对象就是list.vue实例,而且可以通过this. $refs.friends.getList(this.friendList)形式调用子组件的方法,并把参数this.friendList传给子组件。

image-20210517204207913

image-20210517204518369

image-20210517204600947

通过$parent和 $children

通过$parent可以访问父组件,通过 $children可以访问子组件,用法跟前面两种大同小异,主要就是一些细节的问题

$parent返回一个object对象, $children返回的是一个数组对象

通过下图,可以看到$parent和 $children返回的是一个对象,需要引用组件方法属性的话,需要this. $parent.方法和this. $children[0].方法

image-20210517215219629

image-20210517215002853

image-20210517214741181

这个用的比较少,我主要用的是上面两个

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14716.html

发表评论

登录后才能评论