vue的props组件通信

本文中分享vue2中组件通信知识点

案例一：props父子通信 数组写法

父组件将数据传递给子组件

父组件：

主要关注 组件

可以看到这个组件写了一共属性 msg 。这个msg的值就可以被子组件接收

这里的值没有限制 可以是任意类型，也可以使用:msg=“动态数据”。

<template>
  <div id="app">

    <Msg msg="Hello Vue!" />
      
  </div>
</template>

<script>
  import Msg from './components/Msg.vue'
  export default {
    name: 'App',
    components: {
      Msg
    }
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

子组件：

子组件可以通过配置props配置来接收父组件传递过来的属性

props: [“msg”] 表示接收一共属性 msg 这个msg会被映射到vm中

也就是说可以在模板中直接使用。

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
  export default {
    name: "MsgItem",
    props: ["msg"]
  };
</script>

<style scoped></style>

案例二：props父子通信 对象写法

通过案例一可以看到我们接收参数是通过添加props配置数组接收的msg。

这种方式 子组件 并不知道 父组件给我的是一个什么类型的数据。

这个时候我们就可以通过配置对象的方式去限制类型。

子组件props

如果父组件传递的数据不符合子数组的props配置要求则会报错

export default {
  name: "MsgItem",
  props: {
    // 表示该属性是一个字符串类型 如果 msg 不是字符串类型，则会报错
    msg: String,
    // 表示该属性是一个数组类型，且必填
    arr: { 
      type: Array,
      required: true
    },
    name: {
      type: String,
      // 如果 name 没有传值，则使用默认值 "default name"
      default: "default name" // 默认值
    }
  },
  mounted() {
    console.log(this.msg);
  }
};

案例三：子传父Events

场景：现在有一个展示组件list 接收一个父组件的list数据 子组件将list展示出来 并且子组件可以向list添加一项。

这个时候子组件并不能直接操作list。因为list是父组件给他的，如果要修改只能通知父组件，父组件去修改list

解决：父组件给子组件传递一个事件并且绑定处理函数，这个函数接收一个参数。子组件需要添加时触发这个事件并且把要添加的值传递过来。

:::success
注：这里为什么子组件不能直接修改list涉及到vue的单向流数据

:::

父组件

这里给子组件传递了一个add事件 绑定了addItem方法 这个方法接收一个参数

<List @add=“addItem” :list=“list” />

<template>
  <div id="app">
    <List @add="addItem" :list="list" />
  </div>
</template>

<script>
  import List from './components/List.vue'
  export default {
    name: 'App',
    data() {
      return {
        list: ['apple', 'banana', 'orange']
      }
    },
    components: {
      List
    },
    methods: {
      addItem(item) {
        this.list.push(item)
      }
    }
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

子组件：

在点击添加时 调用 add 方法 然后触发 触发父组件的add事件

通过 this.$emit(“add”, this.msg); 第一个参数是事件名 第二个 参数

<template>
  <div>
    <div>
      <input v-model="msg" type="text" />
      <button @click="add" >添加</button>
    </div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "ListMy",
    data() {
      return {
        msg: ''
      }
    },
    props: ["list"],
    methods: {
      add() {
        this.$emit("add", this.msg);
        this.msg = "";
      }
    }
  };
</script>

<style scoped>
  li {
    list-style: none;
  }
</style>