Vue中父子組件間傳值問題怎么解決

本篇內(nèi)容介紹了“Vue中父子組件間傳值問題怎么解決”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

一.父組件向子組件傳值

父組件向子組件傳值會(huì)用到：Prop，一般的我們需要在子組件中進(jìn)行相關(guān)的聲明，如下所示：

子組件為HellowWorld.vue

<script>export default {
  name: 'HelloWorld',
  //接收的變量
  props: {
  //聲明相關(guān)的類型
    msg: String,
    count:Number,
    options:[]
  },
  data(){
    return{

    }
  },
  methods:{
  }}</script>

在父組件App.vue中

<template>
  <div id="app">
    <!-- msg為字符串類型，count為數(shù)字，options為數(shù)組 -->
    <HelloWorld msg="First App" :count='count' :options="options"/>
  </div></template><script>//引入組件import HelloWorld from './components/HelloWorld.vue'export default {
  name: 'App',
  components: {
    HelloWorld  },
  data(){
    return{
      count:0,
      options:[],
    }
  },
  methods:{
  }}</script>

那么在頁面上效果就是：

當(dāng)然我們也可以寫一些事件來進(jìn)行動(dòng)態(tài)的數(shù)據(jù)交互，例如：

二.子組件向父組件傳值

在子組件傳值時(shí)會(huì)用到$emit，值得注意的是：在子組件傳值時(shí)候的方法要與父組件中監(jiān)聽的方法名稱相同，也就是示例中的 listenToChild。

Helloworld.vue子組件：

<template>
  <div class="hello">
    <!-- 文字信息 -->
    <h2 >{{ msg }}</h2>
    <!-- 數(shù)字信息 -->
    <h3>{{count}}</h3>
    <!-- 渲染數(shù)組信息 -->
    <ul>
      <li v-for="(item,index) in options" :key="index">{{item}}</li>
    </ul>
    <!-- 進(jìn)行傳值 -->
    <button @click="SendMsg">點(diǎn)擊</button>
  </div></template><script>export default {
  name: 'HelloWorld',
  props: {
    msg: String,
    count:Number,
    options:[]
  },
  data(){
    return{

    }
  },
  methods:{
    SendMsg(){
      // listenToChild  注意
      this.$emit('listenToChild',this.options)
    }
  }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>h4 {
  margin: 40px 0 0;}ul {
  list-style-type: none;
  padding: 0;}/* li {
  display: inline-block;
  margin: 0 10px;
} */a {
  color: #42b983;}</style>

App.vue父組件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- listenToChild 為子組件傳來的方法 -->
    <HelloWorld msg="First App" :count='count' :options="options" @listenToChild="show"/>
    <button @click="Add">+</button>
    <button @click="restart">置零</button>
    <button @click="Sub">-</button>
    <ul>
      <li v-for="(item,index) in data" :key="index">{{index}}，{{item}}</li>
    </ul>
  </div></template><script>import HelloWorld from './components/HelloWorld.vue'export default {
  name: 'App',
  components: {
    HelloWorld  },
  data(){
    return{
      // 要傳去子組件的參數(shù)
      count:0,
      options:[],
      // 子組件傳來的參數(shù)
      data:[]
    }
  },
  methods:{
    Add(){
      this.count=Number(this.count)+1
      this.options.push('添加一次，當(dāng)前數(shù)值為：'+this.count)
    },
    Sub(){
     
      if(this.count<=0){
        this.options.push('當(dāng)前數(shù)值不能變化了'+this.count)
      }else{
        this.count=Number(this.count)-1
       this.options.pop()
      }
       
    },
    show(data){
      console.log(data)
      this.data=data    },
    restart(){
      this.count=0
      this.options=[]
    }
  }}</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;}button{
  margin: 20px;}ul {
  list-style-type: none;
  padding: 0;}</style>

效果：

“Vue中父子組件間傳值問題怎么解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！