VUE开发中的小知识
目录
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的影响
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-01-04，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
