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>