vue學習筆記5： vue父子元件傳值
阿新 • • 發佈：2020-12-22
技術標籤：vue
- 父元件通過屬性的方式向子元件傳值，子元件通過props進行接收
- vue中有單項資料流的概念，子元件只能接收父元件的值，不能直接對父元件傳過來的值進行修改，因為子元件可能被多個地方引用，容易造成其他元件的錯誤
- 可以在子元件中進行data定義，複製父元件傳過來的值
- 在用$emit時候可以傳遞引數的形式向父元件傳值
- props特性：子元件對父元件傳遞過來的引數進行接收，可以直接使用不會顯示在dom結構上
- 非props特性：子元件沒有對父元件傳遞的引數進行接收，這樣傳遞過來的引數會顯示在dom結構上
父子元件傳值舉例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue-元件</title> </head> <body> <div id="app"> {{total}} <counter :count="1" @change="handelTotal"></counter> <counter :count="2" @change="handelTotal"></counter> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var counter = { props:{ count: { type:String, required: false, default:'default value', validator: function(value) { return (value.length>5) } } }, data: function () { return { number: this.count } }, template: '<div @click="handleItemClick">{{number}}</div>', methods: { handleItemClick: function () { this.number = this.number+1; this.$emit('change', 1); } } } var vm = new Vue({ el: '#app', components: { counter: counter }, data: { total: 3 }, methods: { handelTotal: function (a) { this.total += a } } }) </script> </body> </html>