使用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}}
複製代碼

2. 全局引入(在main.js/app.js文件)

import Mybutton from 'url'
Vue.component('my-button',Mybutton)
複製代碼

組件傳值(重點)

父向子傳值

• 第一種prop

1. 父組件

<son :title="父傳子"></son>
複製代碼

2. 子組件

<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則會警告
複製代碼

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