Vue中元件

0828自我總結Vue中元件

元件：由 template + css + js 三部分組成(.vue檔案)

1）元件具有複用性

複用元件時，資料要隔離

複用元件時，方法不需要隔離，因為方法使用隔離資料就可以産生差別

元件介紹：

每一個元件都有自己的template(虛拟DOM)，最後要替換掉真實DOM(渲染)

挂載點el，在根元件沒有規定template，用挂載的真實DOM拷貝出虛拟DOM，完成執行個體建立後再替換掉真實DOM(渲染)

挂載點el，在根元件規定template，就采用自己的template作為虛拟DOM，挂載點還是必須的，用于占位

所有 new Vue() 産生的元件都稱之為根元件 - 項目開發時，整個項目隻有一個根元件

template隻能解析一個根标簽

最後顯示的效果為

其實他是先出現message

然後由于後面的template會生成一個臨時的dom,會把前面el關聯的整個标簽變成template中的内容

局部元件可以分三步

建立元件

注冊元件

網頁中渲染

使用到全局元件的内容必須用Vue進行挂載,如果不挂載全局元件隻是個普通的自定義标簽

注意點

template中隻能有一個根标簽,如果有多個,隻生效第一個

template内容如果要多行顯示友善觀察的話用反引号`來代替雙引号或者單引号

把data裡面值放function中當然了function可以不用寫省略掉

而且不會受vue中msg影響,隻受元件中的msg影響

特點和局部相同

簡單總結

父級模闆:<local-tag :屬性名="父級的資料" v-for="ad in ads" :key="ad.img">

子級模闆: props: ['屬性名'],

子級模闆: <span  @系統自帶的屬性="子級方法" class="del">x

子級執行個體方法中:this.$emit('自定義事件',子級資料們)

父級模闆:<msg-tag  @自定義事件="父級的方法" v-for="(msg, i) in msgs" :key="msg">

父級方法: 父級的方法(子級的資料們){處理與子級相關的函數}