组件的使用方法
組件分為全局注冊與局部注冊
全局注冊 (不常用)
優點: 所有vue實例都可以使用
缺點: 權限太大 容錯率降低
<body><div id="demo"><my-component></my-conponent></div></body> <script>Vue.component('my-component',{template:'<div>我是一個組件</div>'})var app = new Vue({el:'#demo'}) </script> 復制代碼輸出結果
代碼解構：
局部注冊
<body><div id="demo"><app-component></app-component></div> </body> <script>var app = new Vue({el:'#demo',components:{'app-component':{template:'<span>局部注冊的組件</span>'}}}) </script> </html> 復制代碼顯示結果
DOM結構
Tip: html標簽受限
例如再table中加入span
<body><div id="demo"><!-- <my-component></my-component><app-component></app-component> --><table><app-component></app-component></table></div> </body>復制代碼顯示結果 雖然顯示了 但是dom結構不對
解決方法 is
<body><div id="demo"><!-- <my-component></my-component><app-component></app-component> --><table><tbody is='app-component'></tbody></table></div> </body> 復制代碼顯示結果 dom結構
組件注意事項
- 純小寫字母 name
- 小寫字母 加 - 例 my-name
- template中的內容必須被DOM元素包裹 例：template 也可以嵌套
- 再組件中除了template 還可以有data computed mehods
- 組件中data 必須是一個方法
點哪個按鈕 哪個按鈕變化 雖然都是 但是返回值不一樣
body><div id="demo"><btn-s></btn-s><btn-s></btn-s></div> </body> <script>Vue.component('my-component',{template:'<div>全局注冊組件</div>'})var app = new Vue({el:'#demo',data:{count:1},components:{'btn-s':{template:'<button @click="count++">{{count}}</button>',data:function(){return {count:0}}}}}) </script> 復制代碼輸出結果：
父組件像子組件傳遞內容
<body><div id="demo" ><div ></div><child-node msg='父組件傳遞的內容' ></child-node></div> </body> <script>var app = new Vue({el:'#demo',data:{},components:{'child-node':{props:['msg'],template:'<div>{{msg}}</div>'}}}) </script> 復制代碼顯示結果：
- 使用v-bind進行數據動態綁定
輸出結果：
使用v-bind 使用與否的區別
* <child-node msg='[1,2,3,4]' ></child-node> 傳遞的是字符串 * * <child-node :msg='[1,2,3,4]' ></child-node> 傳遞的是數組可以用length 檢驗 復制代碼vue組件的命名
- 再html中 不區分大小寫 所以只能以短橫線形式命名 c-ode
輸出結果
- vue JS中是區分大小寫的 再vuejs中必須用駝峰 不能寫短橫線
數據驗證 驗證類型 自定義驗證
<body><div id="demo" ><vle-type :a='a' :b='b' :c='c' :d='d' :f='f' :g='g' :h='h' :i='i'></vle-type></div> </body> <script>var app = new Vue({el:'#demo',data:{parentText:'父組件內容',a:1,b:'string類型',// 'vue.js:597 [Vue warn]: Invalid prop: type check failed for prop "c". Expected Number, got String.'c:'props 判定為Number類型 但是我是string類型 會報錯 但不還是會渲染',d:6666,e:'', //假如為空 就取默認值 傳入字符串也會渲染傳入的值 但是會報錯f:3224234, //假如為空 報錯g:[0999],h:88,i:console.log()},components:{'vleType':{props:{a:Number, //判斷接受的綁定值 是否為Number類型b:String, //判斷接受的綁定值 是否為String類型c:Number, d:[Number,String], //即可意識 Number 又可以是 String//必須布爾類型 默認true 指定類型 又要指定默認值 就要寫成一個對象 里邊可以有的選項 type(類型)---required(是否為必傳項)----default(默認值)e:{type:Boolean,default:true},f:{ type:Number,required:true //必傳項 如果不傳 報錯-->[Vue warn]: Missing required prop: "f"},//數組或對象默認值設定g:{type:Array,default:function(){ return [555] //如果父組件沒有響子組件傳 那么就會顯示 這個555}},//自定義一個驗證函數h:{validator:function(value){return value>10}},//驗證是否為functioni:{type:Function}},template:'<div>{{a}} -- {{b}} --{{c}}----{ze8trgl8bvbq} ---- {{e}} ----{{f}} --{{g[0]}} ---{{h}} ----{{i}}</div>'}}}) </script> </html> 復制代碼子組件像父組件通信
javacsript的設計模式--觀察者模式 有兩個方法 dispatchEvent（觸發事件）和addEventListener(添加事件監聽器) vue組件中也有一套模式 子組件用 $emit() '觸發事件' 父組件用 $on()'來監聽子組件的事件'
例子 子組件像父組件更新數據
<body><div id="demo">你兜里有{{tal}}<vl-text @change="changexx"> </vl-text></div> </body> <script>var app = new Vue({el:'#demo',data:{tal:1000},methods:{changexx:function(value){//出處的形參value 就是this.talthis.tal=value}},components:{'vlText':{ //template data mdehods 同級template:'<div>\<button @click="buttonadd"> + </button> \<button @click="buttonlost"> - </button> \</div>',data:function(){return{tal:1000}},methods:{buttonadd:function(){this.tal=this.tal+1000this.$emit('change',this.tal) // 時間名 參數 后面可以加N個參數 只要順序順序要正確},buttonlost:function(){this.tal=this.tal-1000this.$emit('change',this.tal)}}} }}) </script></html> 復制代碼轉載于:https://juejin.im/post/5b3b13f85188251a9e16cad2
總結
- 上一篇： CentOS 7.0卸载自带的maria
- 下一篇： 神经网络中的激活函数的作用和选择