VUE开发中的小知识

目录

1. el-dialog 动态修改title值

2. VUE父子页面传值

3.Element-ui中关闭dialog时隐藏组件并销毁

4. 让float属性不影响其它div及组件

---

1. el-dialog 动态修改title值

--------------注意title前面需要加冒号--------------

<el-dialog :title="titleCode" :visible.sync="outerVisible" ></el-dialog>

初始化变量：titleType

export default {
  data() {
    return {
      titleCode:'' //此处初始化变量
    }
  }
}

处罚按钮

<el-button @click="handleClickM" type="text" size="small" >明细</el-button>

js事件中动态修改标题

handleClickM() {
    this.titleCode = "新的标题";
},    

---

2. VUE父子页面传值

父页面使用v-bind标签

<Demo v-bind:openTitleCode="titleCode"></Demo>

子页面使用props元素接受并打印

export default {
  props: {
    openTitleCode: String,
  },
  created() {
    // 默认加载事件
    console.log(this.openTitleCode);
  },
}

子组件向父组件传值

那么我们延伸一下，子组件怎么向父组件传值？

1. 基本概念

• 在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。

• 每个Vue实例都实现了事件接口：使用$on(evntName)监听事件；使用$emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。

2. 举例说明

• 父组件在组件上定义了一个自定义事件childFn，事件名为parentFn用于接受子组件传过来的message值。

<!-- 父组件 -->
<template>
    <div class="test">
      <test-com @childFn="parentFn"></test-com>
      <br/> 
      子组件传来的值 : {{message}}
    </div>
</template>

<script>
export default {
    // ...
    data() {
        return {
             message: ''
        }
    },
    methods: {
       parentFn(payload) {
        this.message = payload;
      }
    }
}
</script>

子组件是一个buttton按钮，并为其添加了一个click事件，当点击的时候使用$emit()触发事件，把message传给父组件。

<!-- 子组件 -->
<template> 
<div class="testCom">
    <input type="text" v-model="message" />
    <button @click="click">Send</button>
</div>
</template>
<script>
export default {
    // ...
    data() {
        return {
          // 默认
          message: '我是来自子组件的消息'
        }
    },
    methods: {
      click() {
            this.$emit('childFn', this.message);
        }
    }    
}
</script>

这样我们就基本实现了子组件向父组件发送值了:

点击send发送

 

---

3.Element-ui中关闭dialog时隐藏组件并销毁

隐藏dialog的时候要销毁这个dialog。 参看官网后发现给dialog加v-if，在关闭dialog的时候将v-if设置为false这样el-tree会直接将其从DOM结构中抹除，到此问题解决。

        <el-dialog
          destroy-on-close
          :title="titleCode"
          :visible.sync="outerVisible"
          v-if="outerVisible"
        >
          <Demo v-bind:openTitleCode="titleCode"></Demo>
        </el-dialog>

要设置outerVisible为false

export default {
  data() {
    return {
      outerVisible: false
    };
  }
}

---

4. 让float属性不影响其它div及组件

在写页面的时候我们经常会使用float属性来调整样式，但是有一个问题会让下属的所有页面当前float的影响

<div style="width:55px;height:1px;float:left"></div>

如何解决，在使用了float的div下面再写一个空div，加入属性clear:both

<div style="width:55px;height:1px;float:left"></div>
<div style="clear:both"></div>

在clear下面再写代码即不受前面float的影响