一、簡要介紹
父子元件之間的傳值主要有三種：傳遞數值、傳遞方法、傳遞物件，主要是靠子元件的 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 獲取資...