vue中的组件间的通信方式（一）

props和$emit

这是最常见的父子组件通信方式，父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件的。

1）props

props是Vue Option Api中一个选项，是父组件给子组件传递数据的一个配置，可接收数组和对象。

父组件中：

<template>
  <div id="app">
    <MyList  :list=list />
  </div>
</template>
<script>
  import MyList from './components/List'
  export default{
    name:'province',
    data(){
      return {
        list:[
          {
            id:1,
            title:'标题'
          },
          {
            id:2,
            title:'标题2'
          }
        ]
      }
    }，
    components:{
      myList
    }
  }
</script>
           

子组件-List组件中：

<template>
  <div class="list">
    <ul>
<!--       对从父组件那么接收的数据进行循环 -->
      <li v-for="item in list" :key="item.id">
        {{item.title}}
      </li>
    </ul>
  </div>
</template>
<script>
  export default{
    // 接收父组件传递过来的数据
    props:{
      list:Array
    }
  }
</script>
           

2）$emit

$emit实现子组件给父组件传递数据

输入框子组件：

<!-- 子组件 -->
<template>
    <div class="input">
    <Input type="text" v-model="title" style="width: 100px"></Input>
        <Button @click="add">添加</Button>
    </div>
</template>

<script>
    export default {
        name: "input",
        data(){
            return{
                title:''
            }
        },
        methods:{
            add(){
                this.$emit('addGet',this.title);
            }
        }
    }
</script>
<style scoped>
</style>
           

父组件：

父组件在这里定义了一个自定义事件addGet，事件名是addInfo，用来接受子组件传过来的title值。

<!-- 父组件 -->
<template>
    <div id="app">
        <input @addGet="addInfo"></input>
        <items :list="list"></items>
    </div>
</template>
<script>

    import Items  from "./items ";
    import Input from "./input ";
    export default {
        name: "test",
        components: { Items , Input },
        data() {
            return {
                list:[
                    {
                        id:1,
                        title:'标题1'
                    },
                    {
                        id:2,
                        title:'标题2'
                    }

                ]
            }
        },
        methods: {
            addInfo(title){
                this.list.push({
                    id:Math.random(),
                    title
                })
            }
        }
    }
</script>
<style scoped>
</style>

           

在下面的子组件中接收父组件中传递过来的数据渲染在页面中。

<!-- 子组件1 -->
<template>
    <div  class="list">
        <ul>
            <li v-for="item in list" :key="item.id">
                {{ item.title }}
            </li>
        </ul>
    </div>
</template>

<script>

    export default {
        props:{
          list:Array
        },
        name: "items",

    }
</script>
<style scoped>
</style>