當前位置：首頁 > 前端技术 > vue >内容正文

vue

六十一、Vue中父子组件传值和组件参数校验

發布時間：2024/10/8 vue 85 豆豆

生活随笔收集整理的這篇文章主要介紹了六十一、Vue中父子组件传值和组件参数校验小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

@Author：Runsen

@Date:2020/10/17

寫在前面：我是「Runsen」，熱愛技術、熱愛開源、熱愛編程。技術是開源的、知識是共享的。大四棄算法轉前端，需要每天的日積月累，需要強大的自控自制能力。

文章目錄

父組件向子組件傳值
子組件向父組件傳值
組件參數校驗
后言

父組件向子組件傳值

傳值步驟

① 子組件在 props中創建一個屬性，用以接收父組件傳過來的數據；

② 父組件中注冊子組件。通過屬性綁定（ v-bind:）的形式，把需要傳遞給子組件的數據傳遞到子組件的內部，供子組件使用；

③ 在子組件標簽中添加子組件 props中創建的屬性；

④ 把需要傳給子組件的值賦給該屬性

代碼示例

<body><div id="app"><counter :count="1"></counter><counter :count="2"></counter></div><script>// 定義一個局部組件var counter = {props:["count"],template: "<div @click='HandleClick'>{{count}}</div>",methods: {HandleClick:function(){// 修改了父組件中的count值（不建議），子組件不能修改從父組件傳遞過來的值this.count ++ }},}var vm = new Vue({el:"#app",components:{counter:counter}})</script> </body>

父組件可以修改傳給子組件的值，但是子組件不能修改從父組件傳遞過來的值，因為可能會有其他組件共用這個值，因此Vue會報[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "count"的警告錯誤。
`

解決的方法：子組件可以將這個組件拷貝出來后操作拷貝值，最終的代碼示例

<body><div id="app"><counter :count="1"></counter><counter :count="2"></counter></div><script>// 定義一個局部組件var counter = {props:["count"],data() {return {//子組件需要將父組件拷貝出來后操作拷貝值number: this.count}},template: "<div @click='HandleClick'>{{number}}</div>",methods: {HandleClick:function(){// 修改了父組件中的count值（不建議），子組件不能修改從父組件傳遞過來的值this.number ++ }},}var vm = new Vue({el:"#app",components:{counter:counter}})</script> </body>

子組件向父組件傳值

子組件傳值給父組件流程：

1.子組件綁定事件
2.子組件的事件處理函數中通過$emit()向外觸發事件，可攜帶參數
3.父組件監聽子組件觸發的事件
4.在父組件的事件處理函數中拿到子組件傳遞的參數，處理子組件的請求

子組件對自己無法操作的數據向父組件拋出請求（通過$emit()向外觸發事件），這個請求中可攜帶相關數據，等待父組件接收這個響應然后自行處理這個請求后更新的數據重新被傳遞給子組件。

代碼示例

=<body><div id="app"><counter :count="3" @change="HandleChange"></counter><counter :count="2" @change="HandleChange"></counter><div>{{total}}</div></div><script>// 定義一個局部組件var counter = {props:["count"],data() {return {//子組件需要將父組件拷貝出來后操作拷貝值number: this.count}},template: "<div @click='HandleClick'>{{number}}</div>",methods: {HandleClick:function(){// 修改了父組件中的count值（不建議），子組件不能修改從父組件傳遞過來的值this.number = this.number + 2// 子組件向父組件$emit()向外觸發事件，可攜帶參數this.$emit("change",2)}},}var vm = new Vue({el:"#app",components:{counter:counter},data:{total:5},methods:{// 在父組件的事件處理函數中拿到子組件傳遞的參數，處理子組件的請求HandleChange:function(step){this.total += step}}})</script> </body>

總結：父組件向子組件傳值用私有的data數據拷貝props數據，再操作data來實現。子組件傳值給父組件一共四個流程。

在組件傳值過程中，無論是父傳子、還是子傳父，它們都有一個共同點就是有一個中間介質。父傳子的介質是 props中的屬性，子傳父的介質是自定義事件。

父子組件的關系可以總結為props向下傳遞，事件向上傳遞。父組件通過props給子組件下發數據，子組件通過事件給父組件發送信息。

父組件通過 v-bind:綁定參數傳給子組件，子組件通過 props接收這個參數。
在組件的最底層開始寫事件，由最底層組件逐步向上$emit事件流，并攜帶相應參數，最后在父組件內完成總的數據處理。

組件參數校驗

props 可以是數組或對象，用于接收來自父組件的數據。props 可以是簡單的數組，或者使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義驗證和設置默認值。

<body><div id="app"><Child content="Hello world"></Child></div><script>Vue.component("Child",{// props可以用數組，也可以用對象// props: ['content'],props:{// 對content進行約束Number 如果約束是Number或者String，content: [Number,String]// content:Number// 在content中還有validator 復雜校驗規則，自定義校驗器content:{type:String,// 如果type不是String，默認是defaultrequired:false,default:"如果type不是String，默認是default",validator:function(value){//復雜校驗規則，自定義校驗器return (value.length>5)} }},template:"<div>{{content}}</div>"})var vm = new Vue({el: "#app",})</script> </body>

參考資料：

慕課網Vue2.5->2.6->3.0 開發去哪兒網App 從零基礎入門到實戰項目開發
https://mp.weixin.qq.com/s/yvt9mnQwcydUgg3QqdaWeA

后言

據說，放張小姐姐覺得照片可以提高閱讀量，圖是來源學校的2020新生。

這個時代做什么事，門檻都變得好高，想當個宅男，你買得起房子嗎？看看學校的新生，養下眼，這種白日夢不要做！

總結

以上是生活随笔為你收集整理的六十一、Vue中父子组件传值和组件参数校验的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：请问：俄BMP-3的100毫米炮初速和直
下一篇： html5倒计时秒杀怎么做,vue 设