vue-父子組件傳值

父組件傳給子組件：子組件通過props方法接收數據

子組件傳給父組件：通過$emit方法傳遞參數

一、props方法：

1.靜態傳值：

父組件中子組件的標簽設置一個自定義屬性並賦值：

<component message="hello"></component>

子組件中通過props方法接收

export default {
    props:['message']
}

可以顯示到頁面上

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

2.動態傳值：（根據父組件中值的變化，動態改變子組件中的值）

父組件中屬性雙向綁定：

<template>
  <div>
     <input type="text" v-model="hello">
    <keep-alive>
      <component :message="hello"></component>
    </keep-alive>
  </div>
</template>
<script>
    export default{
    data(){
      return {
        hello:"hello"//初始值
      }
    }
</script>

子組件不變；

二、通過ref實現頁面間的通信

1.靜態傳值

父組件中設置ref屬性和getMessage方法：

<template>
  <div>
    <keep-alive>
      <component ref="msg"></component>
    </keep-alive>
  </div>
</template>
<script>
  export default{
    mounted:function () {
      console.log(this.$refs.msg);
      this.$refs.msg.getMessage('我是子組件一！')
    }
  }
</script>

子組件通過getMessage方法顯示在頁面中：

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        message:''
      }
    },
    methods:{
      getMessage(m){
        this.message=m;
      }
    }
  }
</script>

prop和ref之間的區別：

• prop着重於數據的傳遞，他不能調用子組件里的數據和方法，想創建文章組件時，自定義標題和內容這樣的使用場景最適合prop；
• ref着重於索引，主要用來調用子組件里的數據和方法，其實比並擅長數據的傳遞，而且ref用在dom元素的時候，能使到選擇器的作用，這個功能比作為索引更常有用到。

2.父組件調用子組件的屬性和方法

子組件中的屬性與方法：

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        message:'aaaaa'
      }
    },
    methods:{
      fun(){
        console.log(this.message)
        console.log("調用了組件1的方法")
      }
    }
  }
</script>

父組件中調用：

<template>
  <div>
    <keep-alive>
      <component ref="msg"></component>
    </keep-alive>
  </div>
</template>
<script>
  import simple1 from "./simple1.vue";
  export default{
    data(){
      return {

      }
    },
    methods: {
      handleClick(){
        this.$refs.msg.fun();//調用子組件的方法
        console.log(this.$refs.msg.message)//獲取子組件的屬性
      }
    },
    components: {
      simple1
    },
    mounted () {
      this.handleClick();
    }
  }
</script>

三、$emit方法實現通信

$emit(event,arg) 

event為綁定的一個自定義事件，當他執行的時候將他的參數arg傳遞給父組件，父組件通過@event事件監聽並接收參數。

1.靜態傳值

在子組件中：

template>
  <div>
    這是子組件
  </div>
</template>
<script>
  export default {
    data(){
      return{

      }
    },
    mounted () {
      this.$emit('getFun','這里是要傳的參數')
    }
  }
</script>

在父組件中：

<template>
  <div>
    <p>{{title}}</p>
    <keep-alive>
      <component @getFun="showMsg"></component>
    </keep-alive>
  </div>
</template>
<script>
  import simple1 from "./simple1.vue";
  export default{
    data(){
      return {
        title:''
      }
    },
    methods: {
      showMsg(title){
        this.title=title;
      }
    },
    components: {
      simple1
    }
  }
</script>

2.動態傳值

子組件中：

<template>
  <div>
    這是子組件
    <input type="text" v-model="arg">
    <button @click="fun">傳值</button>
  </div>
</template>
<script>
  export default {
    data(){
      return{
        arg:''
      }
    },
    methods:{
      fun(){
        this.$emit('getFun',this.arg)
      }
    }
  }
</script>

父組件不變；

Vue的項目中，如果項目簡單， 父子組件之間的數據傳遞可以使用  props 或者 $emit 等方式 進行傳遞；

但是如果是大中型項目中，很多時候都需要在不相關的平行組件之間傳遞數據，並且很多數據需要多個組件循環使用。這時候再使用上面的方法會讓項目代碼變得冗長，並且不利於組件的復用，提高了耦合度。

Vue 的狀態管理工具 Vuex 完美的解決了這個問題。

原文：cnblogs.com/hlyin/p/10608660.html