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

<template>
  <div id="chat">
        <user-list :friendList="this.friendList" @set-contact="getcontact"ref="friends"></user-list>
  </div>
</template>

<script>
import UserList from "../../components/chat/list";
export default {
  data() {
    return {
      friendList: [
        {
          username: "tom"
        },
        {
          username: "cat"
        },
        {
          username: "dog"
        }
      ],
    };
  },
  components: {
    UserList
  },
   mounted() {
    console.log(this.$refs.friends);
    this.$refs.friends.getList(this.friendList);
    console.log(this.$children instanceof Array); // true
    console.log(this.$children);  
  },
  methods: {
    // 接收子组件返回的数据
    getcontact(index) {
      console.log(index);
    },
  },
};
</script>

复制代码

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

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

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

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

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

// 把props: ["friendList"]换成
props: {
    friendList: {
      type: Array,
    }
}
复制代码

效果图

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

通过$refs

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

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

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