vue试水（一）

elementUi在使用table时嵌套dialog出现的问题

1.内外dialog共两层遮罩，内层dialog被灰色遮罩遮盖，
2.内层dialog继承了外层dialog的样式

解决：
1.在内层dialog上添加append-to-body属性，
2.内层dialog样式修改，在内层dialog外包一层div并加class类

dialog嵌套样式问题

在vue中实现在自己封装的组件中 添加点击事件 触发子组件内部的事件

要实现一个放在何处都能实现：点击事件传送id，显示弹框，
出现的问题是，在子组件内部也有点击事件，这时候有多次触发的情况

解决：
1.引入pubsub-js发送消息

使用pubsubjs派发消息的时候，存在：在子组件内部created中会触发多次，我log查看的时候是出现了8次，我拿到id是要做请求处理，防止多次触发，在subscribe之前先做解绑处理，完美解决！ 子组件内

created() {
    PubSub.unsubscribe("sendTransFer");
    PubSub.subscribe("sendTransFer", (msg, data) => {
    //处理事件
    });
  },

父组件内

<TransferList  @click.native='sendTransFer(scope.row)'></TransferList>
components: {
    TransferList
  },
  methods: {
    sendTransFer: debounce(function(scop) {
      PubSub.publish("sendTransFer",scop.id)
    }, 500),
  }, 

2.子组件组织默认事件

在dialog的外层添加一个父级元素，<div @click.stop.prevent>添加事件即可。

小结

在组件传惨我一开始尝试使用 $emit进行触发，出现的问题在于，只能实现子组件去触发父组件中的事件。而我是要实现一个可以通过触发父组件中的事件，从而去引发子组件中的方法，所以最后发现了pubsub.js的方式去做处理。在子组件内部还有不同的事件，不可避免的出现有多次触发的问题，所以阻止冒泡是必须要处理的。

附加一个自己封装的小方法(金钱铺放)

/**
 * 小数点数字输出为数组
 * @param {array,number(string)} 1.23
 * @returns {array} eg: [{ label: "元", content: "1" },
        { label: "角", content: "2" },
        { label: "分", content: "3" },]
 */
const moneyItems = [
        { label: "千亿", content: "" },
        { label: "百亿", content: "" },
        { label: "拾亿", content: "" },
        { label: "亿", content: "" },
        { label: "佰", content: "" },
        { label: "拾", content: "" },
        { label: "万", content: "" },
        { label: "仟", content: "" },
        { label: "佰", content: "" },
        { label: "拾", content: "" },
        { label: "元", content: "" },
        { label: "角", content: "" },
        { label: "分", content: "" },
      ],
export const changeNumberToArray = (moneyTiems,money)=>{
  const Flag = money.indexOf('.')
  if(Flag!=-1){//有小数点'123.45'
    let moneyList = money.split('.').join('').split('').reverse()
    for (let index = moneyTiems.length-moneyList.length; index < moneyTiems.length; index++) {
      moneyTiems[index] = {...moneyTiems[index],content:moneyList[moneyTiems.length-1-index]}
    }
  }else{//整数
    let moneyList = money.split('').reverse()
    moneyList.unshift('0')
    moneyList.unshift('0')
    for (let index = moneyTiems.length-moneyList.length; index < moneyTiems.length; index++) {
      moneyTiems[index] = {...moneyTiems[index],content:moneyList[moneyTiems.length-1-index]}
    }
  }
  return moneyTiems
}

 this.moneyItems = changeNumberToArray(moneyItems,'14578.00')