@jadestrong 的思路是對(duì)的

你截圖的所示的組件,已經(jīng)是<mt-tabbar>的父組件了,為什么需要再封裝一層讓再上一級(jí)的爺爺組件來(lái)傳遞selected呢?如果的確需要這樣的組件樹(shù)結(jié)構(gòu)的話(huà),則應(yīng)該在截圖所示的組件中使用事件$emit告知爺爺組件更新selected值.然后父組件接收的props值也會(huì)自動(dòng)更新的.

但從我看你問(wèn)題描述中,感覺(jué)像是對(duì)組件間數(shù)據(jù)傳遞有點(diǎn)誤解.就你這個(gè)用例來(lái)看

<template>
  <mt-tabbar v-model="selected">...<mt-tabbar>
</template>
<script>
export default {
  data () {
    return {
      selected: '1'
    }
  }
}
</script>

selected是父組件專(zhuān)遞給子組件(<mt-tabbar>)的,所以selected在父組件中應(yīng)該是組件內(nèi)狀態(tài)(對(duì)應(yīng)vue就是data hook中的數(shù)據(jù)).

而<mt-tabbar>的v-model應(yīng)該本來(lái)就實(shí)現(xiàn)了組件間數(shù)據(jù)傳遞的雙向綁定(不確定,我沒(méi)有用過(guò)),而你上面會(huì)報(bào)錯(cuò),是因?yàn)?lt;mt-tabber>切換的時(shí)候并不是想改變父組件的data,而是想改變爺爺組件的data,所以才會(huì)出錯(cuò),如果你要改變爺爺組件的data,應(yīng)該在父組件中再加一層$emit或是其他像sync一類(lèi)的語(yǔ)法糖.

看下this指向哪里，正常來(lái)說(shuō)箭頭函數(shù)里的this是靜態(tài)綁定的，指向了組件實(shí)例對(duì)象

ECMAScript 1

do
if
in
for
new
try
var
case
else
enum
null
this
true
void
with
break
catch
class
const
false
super
throw
while
delete
export
import
return
switch
typeof
default
extends
finally
continue
debugger
function

ECMAScript 2

do
if
in
for
int
new
try
var
byte
case
char
else
enum
goto
long
null
this
true
void
with
break
catch
class
const
false
final
float
short
super
throw
while
delete
double
export
import
native
public
return
static
switch
throws
typeof
boolean
default
extends
finally
package
private
abstract
continue
debugger
function
volatile
interface
protected
transient
implements
instanceof
synchronized

ECMAScript 3

同 ECMAScript 2

ECMAScript 5

ECMASCript 5 / 5.1刪除了int，byte，char，goto，long，final，float，short，double，native，throws，boolean，abstract，volatile，transient和synchronized。它增加了let和yield。

do
if
in
for
let
new
try
var
case
else
enum
eval
null
this
true
void
with
break
catch
class
const
false
super
throw
while
yield
delete
export
import
public
return
static
switch
typeof
default
extends
finally
package
private

ECMAScript 6

do
if
in
for
let
new
try
var
case
else
enum
eval
null
this
true
void
with
await
break
catch
class
const
false
super
throw
while
yield
delete
export
import
public
return
static
switch
typeof
default
extends
finally
package
private
continue
debugger
function
arguments
interface
protected
implements
instanceof
continue
debugger
function
arguments
interface
protected
implements
instanceof
static
switch
throws
typeof
boolean
default
extends
finally
package
private
abstract
continue
debugger
function
volatile
interface
protected
transient
implements
instanceof
synchronized

應(yīng)該是不能的。 為什么不在鉤子里調(diào)用方法？

嵌入沒(méi)研究過(guò) 你可以到這里面去看看這個(gè)可不可以做嵌入PDF.js

解決了。。。原因是div的寬度不夠，導(dǎo)致的

有個(gè)計(jì)算屬性
computed：{

itemLen(){
    return this.item.length || 0;
}

}

下面的看起來(lái)像圖片或字體轉(zhuǎn)的base64。
如果你不想把這些打包進(jìn)css文件，去改小webpack設(shè)置里的url-loader的limit。

上下不起作用，左右還是有作用的

<div> {{count}}</div>
<el-table :data="tableData" style="width: 100%;" @selection-change="handleSelectionChange" ref="multipleTable">
    <el-table-column align="center" type="selection" width="55" fixed></el-table-column>
    <el-table-column align="center" prop="name" label="方案名稱(chēng)" width='120'></el-table-column>
    <el-table-column align="center" prop ="type" label="兌換類(lèi)型"></el-table-column>
    <el-table-column align="center"  label="兌換個(gè)數(shù)" width="160px" prop ="exchangeNum">
      <template slot-scope="scope">
        <el-input placeholder="請(qǐng)輸入兌換個(gè)數(shù)" v-model="scope.row.exchangeNum" @input="change"></el-input>
      </template>
    </el-table-column>
    <el-table-column align="center" label="消耗積分" prop="costPointsNum"></el-table-column>
  </el-table>

//js
data() {
  return {
    tableData: [{
      type: '禮品',
      name: 'name1',
      exchangeNum:1,
      costPointsNum: 10
    },{
        type: '券',
      name: 'name2',
      exchangeNum:1,
      costPointsNum: 10
    }],
    count:0,
    selectData:[]
  }
},
methods:{
    handleSelectionChange(data){
    data && (this.selectData = data);
    this.computeCount()
  },
  change(a){
      a = a || 0;
    if(/^\d*$/.test(a))
        this.computeCount()
  },
  computeCount(){
      this.count = 0;
    this.selectData.map(i=>{
        this.count += Number(i.costPointsNum*i.exchangeNum)
    })
  }
}

demo
類(lèi)名只是讓你找到要綁定的DOM節(jié)點(diǎn)，事件是綁定在這個(gè)節(jié)點(diǎn)上，而不是綁在類(lèi)上。所以你刪除類(lèi)是沒(méi)有用的，就像你的代碼或是我demo中的按鈕1。而想要實(shí)現(xiàn)只點(diǎn)一次的情況，需要使用removeEventListener方法。

# 后面的都被當(dāng)做了hash

試一試 swiper這個(gè) api:
freeMode

應(yīng)該是 loader 配置的問(wèn)題 貼出來(lái)看一下

在單擊菜單的時(shí)候，onClick事件中將你要的數(shù)據(jù)加載出來(lái)，然后設(shè)置要選中的Tabs的activeKey。

menuClick = () => {
    // load data
    this.setState({activeKey: 'firstKey'});
}

//...........

<Tabs activeKey={this.state.activeKey} />

upload有手動(dòng)上傳文件的模式，你仔細(xì)看下

upload有change事件，會(huì)返回你上傳的文件及列表，保存下來(lái)，然后寫(xiě)個(gè)按鈕手動(dòng)提交保存的文件

你那個(gè)側(cè)邊欄應(yīng)該是放在一級(jí)路由下面,也就是將article作為dashboard子路由應(yīng)該就可以實(shí)現(xiàn)你的需求

我個(gè)人認(rèn)為會(huì)，ES6 中使用 import 比 require 性能強(qiáng)就是在于，

1. require：要把這個(gè)模塊中的所有內(nèi)容引入
2. import：可以只把需要使用的引入到文件

所以，按需引入更不耗性能

一般不予改動(dòng)的庫(kù)是不顯示的

</pre>不是<pre />