watch监听 阻止冒泡 显示tooltip

目录

watch监听

 阻止冒泡

 显示tooltip

---

watch监听

实际使用中需要监听对象变化或者对象数组中某一属性是否发生变化

1. watch是一个对象，对象就有键，有值。
   1. 键：就是你要监控的属性，比如，$route，这个就是要监控路由的变化，或者是data中的某个变量；
   2. 值可以是函数：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形参，第一个是变化后的值，第二个是原始值。值也可以是函数名：不过这个函数名要用单引号；第一个handler：其值是一个回调函数，即监听到变化时应该执行的函数；第二个是deep：其值是 true或false，确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的）；第三个是immediate：其值是true或false，确认是否以当前的初始值执行handler的函数。
   3. 想要监听数组内对象属性变化用以下几种方法即可：
          第一种：created（）｛...｝
          第二种：computed：｛...｝
          第三种：watch：｛...｝；
   4. 普通watch无法监听到对象内部属性变化，只有data中数据改变时才能监听变化；
      因此可添加deep属性：深层遍历，会监听对象内所有属性都变化，注意监听数组的变更不需要这样做，watch首次加载时不会调用的，只有值变化时才能执行，若要首次调用，需要使用immediate属性，只需在对应的函数内使用immediate：true即可。 

data(){
    return {
        associationNewForm:{...}
    }
},
watch:{
      associationNewForm:{
        handler:function(val, oldVal){
          this.$emit('datachange',val);//通知父组件数据变化
        },
        deep:true
      }
    },
configStepData:{
//监听对象数组属性变化，须要深度监听
handler: function (newVal) {
    let dataObj={
      flag:'zgjconfigStepData',
      data:this.configStepData
    };
    this.$emit('getSubAlarmConditionData',dataObj);
},
deep: true    //深度监听
}

 阻止冒泡

 iview中表格渲染行的事件阻止冒泡方式

1.  event.stopPropagation：阻止捕获和冒泡阶段中当前事件的进一步传播，但是它不能防止任何默认行为的发生；
2. 不再派发事件，终止事件在传播过程的捕获，目标处理或起泡阶段进一步传播，调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点；
3. 该方法将停止事件的传播，阻止它被分派到其他Document节点，在事件传播的任何阶段都可以调用它，注意，虽然该方法不能阻止同一个Document节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点；
4. js中的事件默认是冒泡方式，逐层往上传播，可以通过stopPropagation（）函数停止事件在DOM层次中的传播，通过dojo中的event.stop（evt）；效果是相同的。

on: {
click: e => {
  e.stopPropagation();
}}

 显示tooltip

 iview中table列开启了ellipsis鼠标滑过显示tooltip

{
            title: '属性值',
            key: 'attrValue',
            ellipsis:true,
            render: (h, params) => {
                return h('div', [
                  h(
                    'Tooltip',
                  {
                    props: { content: params.row.attrValue, placement: 'top-start', transfer: true },
                    style:{
                      width:'100%'
                    }
                  },
                  [
                    h('span', {
                      style: {
                          display: 'inline-block',
                          width: '100%',
                          overflow: 'hidden',
                          textOverflow: 'ellipsis',
                          whiteSpace: 'nowrap'
                      },
                      on: {
                        click: () => {
                          this.toUpdate(params.index);
                        }
                      }
                    },params.row.attrValue)
                  ]
                )
              ]);

            }
          }