vue之父子組件傳值、以及驗證父子組件傳值的合法性

vue之父子組件傳值

一、父組件給子組件傳值

1. 父組件給子組件傳值

注意：傳值時，傳遞的參數最好不要和子組件里已有的參數名沖突。

並且也可以傳方法，傳方法時不要加擴號，擴號意味着執行。

而且還可以把父組件整個實例傳遞過去

1.1 傳遞屬性

a.父組件調用子組件的時候，綁定動態屬性；

<v-header :title="title"></v-header>

b.在子組件的export default 里面通過props接收父組件穿過來的數據

<script>
  export default {
    name:"header",
    data(){
      return {
      }
    },
    props:["title"]
  }
</script>

結果：

 

1.2 傳遞方法

a.父組件調用子組件的時候，綁定動態方法；

//home.vue
<template>
  <div>
    <v-header :title="title" :homeFun="homeFun"></v-header>
    首頁組件
  </div>
</template>

<script>

  import Header from './Header'
  export default {
    name:"home",
    data(){
      return {
        msg:"我是一個home組件",
        title:"首頁"
      }
    },
    methods:{
      homeFun(){
        console.log(this.msg)
      }
    },
    components:{
      'v-header':Header
    }

  }
</script>


//Header.vue
<template>
  <div>
    <h2>我是頭部組件</h2>
    <h4>{{title}}</h4>
    <button @click="homeFun()">執行父組件的fun方法</button>
  </div>

</template>


<script>
  export default {
    name:"header",
    data(){
      return {
        msg:"6666"
      }
    },
    props:["title","homeFun"]
  }
</script>

結果：

 

1.3 傳遞父組件整個實例

a.父組件調用子組件的時候，綁定this；

#home.vue

<template>
  <div>
    <v-header :title="title" :homeFun="homeFun" :home="this"></v-header>
    首頁組件
  </div>
</template>



#Header.vue

<template>
  <div>
    <h2>我是頭部組件</h2>
    <h4>{{title}}</h4>
    <button @click="homeFun()">執行父組件的fun方法</button>
    <button @click="getParent()">父組件實例</button>
  </div>

</template>


<script>
  export default {
    name:"header",
    data(){
      return {
        msg:"6666"
      }
    },
    methods:{
      getParent(){
        console.log(this.title);
        console.log(this.msg)
      }
    },
    props:["title","homeFun","home"],

  }
</script>

結果：

注意：

當使用this時，只有當子組件中沒有所用變量是才會去使用父組件的變量，比如msg在子組件已經存在，所以在使用的使用直接使用的是子組件的msg，也就是6666.如果想要使用父組件的msg可以這樣：

console.log(this.home.msg)

如：

2. 子組件驗證父組件傳過來的值的合法性

子組件在接收父組件的傳值時 props的值 就不單單只是一個列表里加名稱了。而是一個字典套對象

用法如下：

props: {
    // 基礎的類型檢查 (`null` 匹配任何類型)
    propA: Number,
    // 多個可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認值的數字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認值的對象
    propE: {
      type: Object,
      // 對象或數組默認值必須從一個工廠函數獲取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數
    propF: {
      validator: function (value) {
        // 這個值必須匹配下列字符串中的一個
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

當 prop 驗證失敗的時候，(開發環境構建版本的) Vue 將會產生一個控制台的警告。具體可看官網說明。

 

二、父組件主動獲取子組件的數據和方法

1.步驟

a.調用子組件的時候定義一個ref

<v-header ref="header"></v-header>

b.在父組件里通過以下方式來使用

this.$refs.header.屬性

this.$refs.header.方法

2.演示1：獲取子組件屬性msg

#home.vue

<template>
  <div>
    <v-header ref="header"></v-header>
    首頁組件
    <button @click="getChildData()">主動獲取子組件的屬性和方法</button>
  </div>
</template>

<script>

  import Header from './Header'
  export default {
    name:"home",
    data(){
      return {
        msg:"我是一個home組件",
        title:"首頁"
      }
    },
    methods:{
      getChildData(){
        console.log(this.$refs.header.msg)
      }
    },
    components:{
      'v-header':Header
    }

  }
</script>


#header.vue

<template>
  <div>
    <h2>我是頭部組件</h2>

  </div>

</template>


<script>
  export default {
    name:"header",
    data(){
      return {
        msg:"6666"
      }
    },


  }
</script>

結果：

演示2：獲取子組件的方法

#home.vue

<template>
  <div>
    <v-header ref="header"></v-header>
    首頁組件
    <button @click="getChildData()">主動獲取子組件的屬性和方法</button>
  </div>
</template>

<script>

  import Header from './Header'
  export default {
    name:"home",
    data(){
      return {
        msg:"我是一個home組件",
        title:"首頁"
      }
    },
    methods:{
      getChildData(){
        console.log(this.$refs.header.msg);
        this.$refs.header.run()
      }
    },
    components:{
      'v-header':Header
    }

  }
</script>



#header.vue

<template>
  <div>
    <h2>我是頭部組件</h2>

  </div>

</template>


<script>
  export default {
    name:"header",
    data(){
      return {
        msg:"6666"
      }
    },
    methods:{
      run(){
        console.log("我是子組件的方法")
      }
    }


  }
</script>

結果：

 

 三、子組件主動獲取父組件的屬性和方法

1.步驟

直接在子組件中使用下面命令：

this.$parent.屬性

this.$parent.方法

2.演示

#home.vue

<template>
  <div>
    <v-header ref="header"></v-header>
    <hr />
    首頁組件
    <br />
    <button @click="getChildData()">主動獲取子組件的屬性和方法</button>
  </div>
</template>

<script>

  import Header from './Header'
  export default {
    name:"home",
    data(){
      return {
        msg:"我是一個home組件",
        title:"首頁"
      }
    },
    methods:{
      getChildData(){
        console.log(this.$refs.header.msg);
        this.$refs.header.run()
      },
      run(){
        console.log("我是home組件的方法")
      }
    },
    components:{
      'v-header':Header
    }

  }
</script>


#header.vue

<template>
  <div>
    <h2>我是頭部組件</h2>
    <button @click="getParentData()">主動獲取父組件的屬性和方法</button>
  </div>

</template>


<script>
  export default {
    name:"header",
    data(){
      return {
        msg:"6666"
      }
    },
    methods:{
      run(){
        console.log("我是子組件的方法")
      },
      getParentData(){
        console.log(this.$parent.msg);
        this.$parent.run()
      },
    }


  }
</script>

結果：