使用VUE寫一段時間專案的個人總結-元件篇

我是個小掛件發表於2019-01-10
Vue元件

筆者yy:哭泣，為什麼不可以設定自己看，我只是做個筆記，好羞澀啊

元件篇

元件建立

  1. var mycomponent=Vue.extend({template:'',methods:{}}) 這個是感覺更酷的寫法，用函式式
  2. var myconmponent={template:'',methods:{}} 這個是語法糖

元件引入方式（全家桶式的）

import 元件名 from 'url'
components:{元件名A:元件名B}

元件名A為父元件中要使用html名，元件B為import的元件名，當兩個名字一樣時，可以用es6的語法糖，直接寫為 {components:{元件名}

  • 根據規範，子元件的標籤最好為hs-name用-來分開，防止為了和以後的HTML標籤衝突
  1. 區域性引入
    在每個vue檔案或者vue示例中引入，因為這個式區域性引入，可以同時引入多個，所以component為複數，components
import Mybutton from 'url1'
import Myselect from 'url2'
 {components:{'my-button':Mybutton,'my-select':Myselect}}
複製程式碼
  1. 全域性引入(在main.js/app.js檔案)
import Mybutton from 'url'
Vue.component('my-button',Mybutton)
複製程式碼

元件傳值(重點)

父向子傳值

  • 第一種prop
  1. 父元件
 <son :title="父傳子"></son>
複製程式碼
  1. 子元件
 <template>{{title}}</template>
1. props:['title','id','name']//直接寫
2. props:{title:String} // 基礎型別檢測, null意味著任何型別都行
3. props:{title: [String, Number]}// 多種型別
4. props:{title:{type: String,required: true}}  // 必傳且是String
5.props:{title:{type: Number,default: 101}}, //數字有預設值
6. props:{title:{type: Object, default: function() {
    console.log("propE default invoked.");
    return { message: "I am from propE." };
   }} // 陣列、預設值是一個工廠函式返回物件
7. props:{title:{isValid: function(value) {return value > 100;}}}// 自定義驗證函式,如果傳入的值沒有大於100則會警告
複製程式碼

子元件理論上是不能修改處理父元件傳過來的值的，只能最多把值進行賦值給別的變數再進行處理

相關文章