六十一、Vue中父子组件传值和组件参数校验
@Author：Runsen
@Date:2020/10/17
寫在前面：我是「Runsen」，熱愛技術、熱愛開源、熱愛編程。技術是開源的、知識是共享的。大四棄算法轉前端，需要每天的日積月累，需要強大的自控自制能力。
文章目錄
- 父組件向子組件傳值
- 子組件向父組件傳值
- 組件參數(shù)校驗
- 后言
父組件向子組件傳值
① 子組件在 props中創(chuàng)建一個屬性，用以接收父組件傳過來的數(shù)據(jù)；
② 父組件中注冊子組件。通過屬性綁定（ v-bind:）的形式，把需要傳遞給子組件的數(shù)據(jù)傳遞到子組件的內部，供子組件使用；
③ 在子組件標簽中添加子組件 props中創(chuàng)建的屬性；
④ 把需要傳給子組件的值賦給該屬性
父組件可以修改傳給子組件的值，但是子組件不能修改從父組件傳遞過來的值，因為可能會有其他組件共用這個值，因此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.子組件的事件處理函數(shù)中通過$emit()向外觸發(fā)事件，可攜帶參數(shù)
-
3.父組件監(jiān)聽子組件觸發(fā)的事件
-
4.在父組件的事件處理函數(shù)中拿到子組件傳遞的參數(shù)，處理子組件的請求
子組件對自己無法操作的數(shù)據(jù)向父組件拋出請求（通過$emit()向外觸發(fā)事件），這個請求中可攜帶相關數(shù)據(jù)，等待父組件接收這個響應然后自行處理這個請求后更新的數(shù)據(jù)重新被傳遞給子組件。
代碼示例
=<body><div id="app"><!-- 子組件向父組件傳值 父組件監(jiān)聽子組件觸發(fā)的事件--><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()向外觸發(fā)事件，可攜帶參數(shù)this.$emit("change",2)}},}var vm = new Vue({el:"#app",components:{counter:counter},data:{total:5},methods:{// 在父組件的事件處理函數(shù)中拿到子組件傳遞的參數(shù)，處理子組件的請求HandleChange:function(step){this.total += step}}})</script> </body>總結：父組件向子組件傳值用私有的data數(shù)據(jù)拷貝props數(shù)據(jù)，再操作data來實現(xiàn)。子組件傳值給父組件一共四個流程。
在組件傳值過程中，無論是父傳子、還是子傳父，它們都有一個共同點就是有一個中間介質。父傳子的介質是 props中的屬性，子傳父的介質是自定義事件。
父子組件的關系可以總結為props向下傳遞，事件向上傳遞。父組件通過props給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送信息。
父組件通過 v-bind:綁定參數(shù)傳給子組件，子組件通過 props接收這個參數(shù)。
在組件的最底層開始寫事件，由最底層組件逐步向上$emit事件流，并攜帶相應參數(shù)，最后在父組件內完成總的數(shù)據(jù)處理。
組件參數(shù)校驗
props 可以是數(shù)組或對象，用于接收來自父組件的數(shù)據(jù)。props 可以是簡單的數(shù)組，或者使用對象作為替代，對象允許配置高級選項，如類型檢測、自定義驗證和設置默認值。
<body><div id="app"><!-- :content="js表達式" content="" 字符串比如:content="123“ 是數(shù)字content="123"是字符串--><Child content="Hello world"></Child></div><script>Vue.component("Child",{// props可以用數(shù)組，也可以用對象// props: ['content'],props:{// 對content進行約束Number 如果約束是Number或者String，content: [Number,String]// content:Number// 在content中還有validator 復雜校驗規(guī)則，自定義校驗器content:{type:String,// 如果type不是String，默認是defaultrequired:false,default:"如果type不是String，默認是default",validator:function(value){//復雜校驗規(guī)則，自定義校驗器return (value.length>5)} }},template:"<div>{{content}}</div>"})var vm = new Vue({el: "#app",})</script> </body>參考資料：
- 慕課網(wǎng)Vue2.5->2.6->3.0 開發(fā)去哪兒網(wǎng)App 從零基礎入門到實戰(zhàn)項目開發(fā)
- https://mp.weixin.qq.com/s/yvt9mnQwcydUgg3QqdaWeA
后言
據(jù)說，放張小姐姐覺得照片可以提高閱讀量，圖是來源學校的2020新生。
這個時代做什么事，門檻都變得好高，想當個宅男，你買得起房子嗎？看看學校的新生，養(yǎng)下眼，這種白日夢不要做！
總結
以上是生活随笔為你收集整理的六十一、Vue中父子组件传值和组件参数校验的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 请问：俄BMP-3的100毫米炮初速和直
- 下一篇： u盘隐藏文档怎么找出来怎么办 如何查找隐