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>