首先說一下父子組件就是在一個vue文件中引入另一個vue文件，被引入vue文件就是子組件，引入vue文件的vue文件就是父組件。而在父組件中是不能直接調用子組件中的變量值的。下面詳細說一下，父子組件之間怎么傳值。
先說一下父組件引入子組件的方法。
1、路由配置：使用children屬性實現路由嵌套，嵌套的組件關系就是父子組件關系
{
path: '/father',
name: 'father',
component: father,
children: [
{
path: 'son',
name: 'son',
component: son
}
]
}
2、組件傳值-父組件向子組件傳值
第一步：父組件 在引用子組件時，通過屬性綁定（v-bind：）的形式，把需要傳遞給子組件的數據，傳遞到子組件內部，供子組件使用
父組件：father.vue
<template>
<div>
<h1>父組件</h1>
<router-view v-bind:fData="data1" :fMessage="data2"></router-view>
</div>
</template>
<script>
export default {
data () {
return {
data1: '父組件數據data1',
data2: '父組件數據data2',
};
}
}
</script>
第二步：把父組件傳遞過來的數據， 在 props數組 中定義一下
-
組件中的 所有props 中的數據，都是通過父組件傳遞給子組件的
-
props 中的數據都是只讀的，無法重新賦值
第三步：在該子組件中使用props數組 中定義好的數據
子組件：son.vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<
template
>
<
div
>
<
h1
>子組件</
h1
>
<
p
>下面是父組件傳過來的數據</
p
>
<
p
>第一個數據：{{fData}}</
p
>
<
p
>第二個數據：{{fMessage}}</
p
>
</
div
>
</
template
>
<
script
>
export default {
props: ['fData', 'fMessage'],
data () {
return {
};
}
}
</
script
>
|
3、組件傳值-父組件把方法傳遞給子組件
第一步：父組件向子組件傳遞方法，使用事件綁定機制 v-on，自定義一個事件屬性，傳遞給子組件
父組件：father.vue
<template>
<div>
<h1>父組件</h1>
<router-view @show="showFather"></router-view>
</div>
</template>
<script>
export default {
data () {
return {
};
},
methods: {
showFather (a, b) {
console.log('觸發了父組件的方法' + '======' + a + '======' + b);
}
}
}
</script>
第二步：在子組件中定義一個方法，在方法中，利用 $emit 觸發 父組件傳遞過來的，掛載在當前實例上的事件，還可以傳遞參數
第三步：在子組件中調用定義的那個方法，就可以觸發父組件傳遞過來的方法了
子組件：son.vue
<template>
<div>
<h1>子組件</h1>
<Button type="primary" @click="sonClick">觸發父組件方法</Button>
</div>
</template>
<script>
export default {
data () {
return {
};
},
methods: {
sonClick () {
this.$emit('show', 111, 222);
}
}
}
</script>
4、組件傳值-子組件通過事件調用向父組件傳值
在子組件中，利用 $emit 觸發 父組件傳遞過來的方法的時候，可以將子組件的數據當做參數傳遞給父組件
父組件：father.vue
<template>
<div>
<h1>父組件</h1>
<router-view @show="showFather"></router-view>
</div>
</template>
<script>
export default {
data () {
return {
fromSon1: '',
fromSon2: ''
};
},
methods: {
showFather (a, b) {
this.fromSon1 = a;
this.fromSon2 = b;
console.log('觸發了父組件的方法' + '======' + a + '======' + b);
}
}
}
</script>
子組件：son.vue
<template>
<div>
<h1>子組件</h1>
<Button type="primary" @click="sonClick">觸發父組件方法</Button>
</div>
</template>
<script>
export default {
props: ['fData', 'fMessage'],
data () {
return {
sonMessage: '子組件數據sonMessage',
sonData: '子組件數據sonData'
};
},
methods: {
sonClick () {
this.$emit('show', this.sonMessage, this.sonData);
}
}
}
</script>
5、父子組件之間相互傳值
父組件：father.vue
<template>
<div>
<h1>父組件</h1>
<Button type="primary" @click="getData">獲取數據</Button>
<router-view v-bind:fData="data1" :fMessage="data2" @show="showFather"></router-view>
</div>
</template>
<script>
export default {
data () {
return {
data1: '父組件數據data1',
data2: '父組件數據data2',
fromSon1: '',
fromSon2: ''
};
},
methods: {
showFather (a, b) {
this.fromSon1 = a;
this.fromSon2 = b;
console.log('觸發了父組件的方法' + '======' + a + '======' + b);
},
getData () {
console.log(this.fromSon1);
console.log(this.fromSon2);
}
}
}
</script>
子組件：son.vue
<template>
<div>
<h1>子組件</h1>
<p>下面是父組件傳過來的數據</p>
<p>第一個數據：{{fData}}</p>
<p>第二個數據：{{fMessage}}</p>
<Button type="primary" @click="sonClick">觸發父組件方法</Button>
</div>
</template>
<script>
export default {
props: ['fData', 'fMessage'],
data () {
return {
sonMessage: '子組件數據sonMessage',
sonData: '子組件數據sonData'
};
},
methods: {
sonClick () {
this.$emit('show', this.sonMessage, this.sonData);
}
}
}
</script>