vue2.0中組件傳值的幾種方式總結(jié)

更新時間：2022年12月07日 09:38:51 作者：鍵.

這篇文章主要介紹了vue2.0中組件傳值的幾種方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

搭建好測試環(huán)境

app.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    
    <child></child>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Child from './components/Child.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Child
  }
}
</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>
Child.vue
````html
!<template>
  <div class="Child">
      <h1>這是子組件</h1>
  </div>
</template>

<script>
export default {
    name:'Child',
    data() {
        return {
            
        }
    },
}
</script>

<style>

</style>

1.方法一

父傳子

父組件向子組件使用props傳值

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

    <child :sendParam="send"></child>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Child from './components/Child.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Child
  },
  data() {
    return {
      send:'父組件傳給子組件的值'
    }
  },
}
</script>

<template>
  <div class="Child">
      <h1>這是子組件</h1>
      <div>{{sendParam}}</div>
  </div>
</template>

<script>
export default {
    name:'Child',
    props:['sendParam'],
    data() {
        return {
            
        }
    },
}
</script>

這里的props除了寫成數(shù)組還可以寫成對象的方式：

<script>
export default {
    name:'Child',
    data() {
        return {
            
        }
    },
        //方法一：用數(shù)組獲取值
    //    , props:['sendParam'],

    //方法二：用對象獲取值
    props:{
        sendParam:String,
    }
}
</script>

所以說在父組件給子組件傳值的時候是可以傳對象，布爾值,函數(shù)等，在子組件接收值的時候也可以做相應(yīng)的限制或設(shè)置默認(rèn)值。以對象接收時有type，default，require等參數(shù)可以設(shè)置，詳細(xì)的內(nèi)容可參考官網(wǎng)的文檔。

Vue.component('my-component', {
  props: {
    // 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證)
    propA: Number,
    // 多個可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認(rèn)值的數(shù)字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認(rèn)值的對象
    propE: {
      type: Object,
      // 對象或數(shù)組默認(rèn)值必須從一個工廠函數(shù)獲取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數(shù)
    propF: {
      validator: function (value) {
        // 這個值必須匹配下列字符串中的一個
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

子傳父

子組件向父組件傳值需要使用自定義事件

<template>
  <div class="Child">
      <h1>這是子組件</h1>
      <div>{{sendParam}}</div>
      <button @click="run">子傳父</button>
  </div>
</template>

<script>
export default {
    name:'Child',
    data() {
        return {
            childata:'這是子傳父的值'
        }
    },
    props:['sendParam'],
    methods: {
        run(){
            this.$emit('event',this.childata)
        }
    },
}
</script>

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

    <child :sendParam="send" @event="reviceChild"></child>

    <div>{{revice}}</div>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import Child from './components/Child.vue'

export default {
  name: 'App',
  components: {
    HelloWorld,
    Child
  },
  data() {
    return {
      send:'父組件傳給子組件的值',
      revice:''
    }
  },
  methods: {
    reviceChild(val){
      this.revice=val
    }
  },
}
</script>

子組件中的事件不一定要用click點擊事件，還可以是各種可觸發(fā)的事件，比如mouseover，dbclick等。

2.方法二

在父組件中加上一個ref屬性并打印其結(jié)果

<child :sendParam="send" @event="reviceChild" ref="child"></child>

console.log(this.$refs.child);

在結(jié)果中我們發(fā)現(xiàn)了很多子組件Child中有的方法，數(shù)據(jù)。

結(jié)果表明，我們打印的this.$refs.child就是整個子組件，也就是說，我們可以在這里直接拿到子組件的值。父組件拿子組件的值同理。

父傳子

<button @click="getParent">獲取父組件的值</button>

getParent(){
   console.log(this.$parent.send)
}

子傳父

<child :sendParam="send" @event="reviceChild" ref="child"></child>

<button @click="go">獲取ref</button>

go(){
  console.log(this.$refs.child.childata);
}

奇怪的傳值

父組件中添加:that="this"

<child :sendParam="send" @event="reviceChild" ref="child" :that="this"></child>

子組件中props接收

props:{
     sendParam:{
         type:String,
         default:'111'
     },
     that:{}
 },

在生命周期中輸出

mounted() {
    console.log(this.that)
},

這里也可以拿到整個父組件

mounted() {
    console.log(this.that.send)//子組件拿到父組件的值
},

3.方法三

vue提供了provide,inject來實現(xiàn)如下場景的組件傳值，父組件向子組件跨級傳值

父組件：

export default {
	  name: 'App',
	  components: {
	    HelloWorld,
	    Child
	  },
	  provide:{
	    psend:'123456'
	  },
}

子組件：

export default {
    name:'Child',
    data() {
        return {
        }
    },
    inject:['psend'],
    mounted() {
       console.log(this.psend);
   },
 }