一、簡要介紹
父子元件之間的傳值主要有三種:傳遞數值、傳遞方法、傳遞物件,主要是靠子元件的 props 屬性來接收傳值,下面分別介紹:
(一)傳遞數值
1.子元件:header.vue
export default {
data() {
return {
methods: {
// 接收父類的傳值
props: ['msg']
可以看到,在子元件中的data物件裡並沒有 msg 屬性,這裡呼叫的是父類傳遞過來的 msg 屬性,接收就是靠 props: ['msg']。
2.父元件home.vue
// 1.引入子元件
import head from './head.vue';
export default {
data() {
return {
msg: '我是乙個元件'
methods: {
components: {
"v-head": head
// 頁面重新整理時請求資料
mounted() {
傳值的核心思想就是,在使用子元件的地方,加上要傳遞的值:
(二)傳遞方法
傳遞方法的寫法和傳遞數值一樣,下面只寫出關鍵步驟:
父元件// 1.引入子元件
import head from './head.vue';
export default {
data() {
return {
msg: '我是乙個元件'
methods: {
run() {
alert(this.msg);
components: {
"v-head": head
// 頁面重新整理時請求資料
mounted() {
子元件接收父元件的方法
export default {
data() {
return {
methods: {
// 接收父類的傳值
props: ['run']
(三)傳遞物件
傳遞物件的寫法和傳遞數值一樣,下面只寫出關鍵步驟:
父元件// 1.引入子元件
import head from './head.vue';
export default {
data() {
return {
msg: '我是乙個元件'
methods: {
run() {
alert(this.msg);
components: {
"v-head": head
// 頁面重新整理時請求資料
mounted() {
子元件接收父元件的方法
export default {
data() {
return {
// 呼叫傳過來的home元件的msg屬性
msg: this.home.msg
methods: {
run() {
// 呼叫傳過來的home元件的run()方法
this.home.run();
// 接收父類的傳值
props: ['home']
(四)傳遞數值型別校驗
props: {
'home': object
其他和上面類似!
父子組建傳值 vue 父子元件傳值
父元件傳給子元件 子元件通過props方法接收資料 子元件傳給父元件 通過 emit方法傳遞引數 一 props方法 1.靜態傳值 父元件中子元件的標籤設定乙個自定義屬性並賦值 子元件中通過props方法接收 export default 2.動態傳值 根據父元件中值的變化,動態改變子元件中的值 父...
父子組建傳值 vue父子元件之間傳值
vue父子元件進行傳值 vue中的父子元件,什麼是父元件什麼是子元件呢?就跟html標籤一樣,誰包裹著誰誰就是父元件,被包裹的元素就是子元件。父元件向子元件傳值 下面用的script引入的方式,那種vue cli搭建的同理 父元件通過 v bind 屬性名 自定義的 要傳遞的資料 子元件通過 pro...
vue元件基礎之父子傳值
可以看出資料從後端獲取過來,最外層的父元件接收資料,子元件不能直接獲取,必須由父元件傳遞,此時使用props,並且父元件的值更新後,子元件的值也會隨之更新,但是反過來通過修改子元件props來影響父元件是不行的。但是子元件可以通過 emit觸發父元件的自定義事件來進行傳值。一 props 1 獲取資...