vue父子元件的互相傳值和呼叫

阿新 • • 發佈：2021-04-24

1、父傳值給子元件

父元件：

<template>
  <div>
    <p class="father">父元件</p>
    <child :sid="id"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components: http://www.cppcns.com{
    child
  },data() {
    return {
      id:'1234' // 父元件向子元件傳的值
    }
  }
}
</script>

子元件：

<template>
  <div>
    <p class="child">子元件</p>
    <p class="child">接收父元件的值是：{{ sid }}</p>
  </div>
</template>

<script>
export default {
  props:{
    sid:{
      type:String,default: '0'
    }
  },// props:["sid"],data() {
　　　return { 

　　　} 
　} 
} 
</script>

說明：

①sid是在子元件中繫結要傳的值，記住“=”前的sid要和子元件中要接受的變數名要一致

②在子元件中用props來接受傳入的值，可以寫成物件型別，規定型別和預設值，也可以直接寫成字串

③在子元件中可以直接使用，也可以在函式中使用this.sid進行訪問

2、子傳值給父元件

父元件：

<template>
  <div>
    <p class="father">父元件</p>
　　　 <pclass="father">接收到子組jFfhOVt件的值：{{childSid}}</p>
    <child @passVaule="parentPassValue"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components: {
    child
  },data() {
    return {
      childSid:'' // 接收子元件的值
    }
  },methods: {
    parentPassValue(data) {
      this.childSid = data;
    }
  }
}
</script>

子元件：

<template>
  <div>
    <p class="child">子元件</p>
    <button @click="valueClick">傳值</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },methods: {
    valueClick() {
      this.$emit('pas程式設計客棧sVaule',19)
    }
  }
}
</script>

說明：

①子元件中給一個方法去觸發$emit，第一個引數是在父元件引入子元件繫結的函式名('passVaule')，第二個是要傳的值(19)

②父元件中繫結一個函式，呼叫父元件中繫結的函式，在其中對值進行接收操作

3、子呼叫父元件中的方法

父元件：

<template>
  <div>
    <p class="father">父元件</p>
    <child @funVaule="parentFunValue"></child>
  </div>
</template>

<script>
import child from './child'
export default {
  components: {
    child
  },data() {
    return {
    }
  },methods: {
    parentFunValue() {
      console.log('呼叫了父元件中的函式');
    }
  }
}
</script>

子元件：

<template>
  <div>
    <p class="child">子元件</p>
    <button @click="funClick">呼叫父元件方法</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },methods: {
    funClick() {
      this.$emit('funVaule')
    }
  }
}
</script>

說明：

①這個和子傳值給父類似，只是不傳值，呼叫了父元件的繫結的函式

4、父呼叫子元件中的方法

父元件：

<template>
  <div>
    <p class="father">父元件</p>
    <button @click="childClick">呼叫子元件方法</button>
    <child ref="mychild"></child>
  </div>
</template>

<script>
import child from './child程式設計客棧程式設計客棧'
export default {
  components: {
    child
  },methods: {
    childClick() {
      this.$refs.mychild.testNum(1)
    }
  }
}
</script>

子元件：

<template>
  <div>
    <p class="child">子元件</p>
</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
    }
  },methods: {
    testNum(data) {
      console.log('呼叫了子元件中的方法:',data);
    }
  }
}
</script>

說明：

① 父元件中在引入的子元件中寫入 ref = "mychild" mychid為自己定義的例項名

② 在函式中寫 this.refs.mychild.testNum()， “testNum”為子元件中定義的函式名

③子元件定義一個函式，讓父元件呼叫即可

④這個方法也可以進行傳值，在括號中傳入值，子元件接收即可

以上就是vue父子元件的互相傳值和呼叫的詳細內容，更多關於vue父子元件的傳值和呼叫的資料請關注我們其它相關文章！