이번에는 Vue를 사용하여 페이지 오른쪽 상단에 플로팅/숨겨진 메뉴를 구현하는 방법을 보여드리겠습니다. Vue를 사용하여 페이지 오른쪽 상단에 플로팅/숨겨진 메뉴를 구현할 때 주의할 점은 무엇인가요? 다음은 실제 사례입니다. 살펴보겠습니다.
이것은 대부분의 웹사이트에서 매우 일반적인 기능입니다. 플로팅 메뉴를 표시하려면 페이지 오른쪽 상단에 있는 아바타를 클릭하거나 메뉴를 숨기려면 아바타를 다시 클릭하세요.
jQuery 프론트엔드 공성사자로서 이 기능을 구현하는 것은 매우 쉽다고 할 수 있지만, vue 문서를 이제 막 본 초보자에게는 여전히 개인적으로 넘어야 할 함정이 있습니다. 성공하기 위해.
지식 포인트
구성 요소 및 구성 요소 간 통신
계산된 속성
Text
1. 상위 구성 요소
이것은 시스템에만 관련됩니다. 현재 메뉴 이 기능은 아직 라우팅에 포함되지 않습니다.
기본 아이디어는 props를 통해 showCancel의 부울 값을 하위 구성 요소에 전달하고 이벤트를 각각 상위 및 하위 구성 요소에 바인딩하여 시스템 메뉴의 표시 상태를 제어하는 것입니다. 상위 구성 요소의 바운드 클릭 이벤트에서 하위 구성 요소에 전달된 showCancel 값이 재설정됩니다.
여기에 첫 번째 작은 지식 포인트가 있습니다 - 하위 구성 요소 호출:
먼저 하위 구성 요소에 의해 렌더링되기를 기다리는 사용자 정의 요소를 작성합니다:
<t-header :showCancel=showCancel></t-header>
로그인 후 복사
그런 다음 작성된 하위 구성 요소를 가져옵니다:
import THeader from "./components/t-header/t-header";
로그인 후 복사
그런 다음 등록합니다.
components: {
THeader
}로그인 후 복사
이 시점에서 신입생은 이 코드 줄이 하위 구성 요소를 태그에 매핑하는 방법에 대해 혼란스러울 수 있습니다.
구성 요소를 등록할 때( 또는 prop), kebab-case(하이픈으로 구분된 이름 지정), camelCase(카멜 케이스 이름 지정) 또는 PascalCase(단어의 첫 글자를 대문자로 사용하여 이름 지정)를 사용할 수 있습니다.
HTML 템플릿에서는 kebab-case를 사용하세요.
me 예를 들어, 커스텀 요소가 인 경우 등록된 구성 요소 이름은 t-header, tHeader 및 THeader의 세 가지 방법으로 작성할 수 있습니다. 이 경우 등록된 구성 요소는 자동으로 작성됩니다. 인식되어 로 렌더링됩니다.
위의 내용은 단일 파일 구성 요소에서 으로 지정되는 HTML 템플릿이며 구성 요소 옵션에서 사용되는 문자열 템플릿도 있습니다. template: "" 지정된 템플릿입니다. 문자열 템플릿을 사용할 때 사용자 정의 태그는 세 가지 방법으로 작성할 수 있습니다. 자세한 내용은 구성 요소 명명 규칙에 대한 공식 문서를 참조하세요.
이렇게 상위 구성 요소의 프로토타입이 탄생했습니다.
<t-header :showCancel=showCancel></t-header>
<script>
import THeader from "./components/t-header/t-header";
export default {
name: "app",
components: {
THeader
},
data() {
return {
showCancel: false
};
},
methods: {
hideCancel() {
this.showCancel = false;
}
}
};
</script>
로그인 후 복사
2. 하위 구성 요소
하위 구성 요소에서 .cancel은 시스템 메뉴를 여는 버튼이고 .cancel- p는 시스템 메뉴입니다.
<template>
<p class="header-wrapper">
/*这里是logo和title*/
...
/*这里是用户名和按钮*/
<p class="info-wrapper">
<span class="username">你好，管理员！</span>
<span class="cancel" @click.stop="switchCancelBoard">
<p class="cancel-p" v-show="showCancel">
<ul>
<li @click.stop="doSomething" title="用户设置">设置 </li>
<li @click.stop="doSomething" title="退出登录">退出 </li>
</ul>
</p>
</span>
</p>
</p>
</template>
로그인 후 복사
트랩을 밟기 전의 아이디어에 따르면 v-show를 사용하여 하위 구성 요소가 showCancel 값을 받은 후 표시를 제어하고 바인딩 클릭 이벤트에서 숨깁니다. 상위 및 하위 구성 요소 중 상황에 따라 showCancel 값만 변경하면 됩니다. 시스템 메뉴에 있는 여러 옵션의 바인딩 이벤트가 상위-하위 구성 요소의 바인딩 이벤트를 트리거해서는 안 됩니다. 메뉴를 클릭하면 사라지기 때문에 바인딩 이벤트에 .stop이 사용됩니다. 즉,
@click.stop ="doSomething"@click.stop="doSomething"
于是万事大吉，也就是像这样：
<script>
export default {
props: {
showCancel: {
type: Boolean
}
},
methods: {
doSomething() {},
switchCancelBoard() {
this.showCancel = !this.showCancel;
}
},
computed: {
ifShowCancel() {
return this.showCancel;
}
}
};
</script>로그인 후 복사
然而第一波踩坑之后一起表明显然我还是太年轻。下面是一些不好的示范：
prop来的showCancel值的确可以用，点击子组件按钮的时候，
this.showCancel=!this.showCancel
그래서 모든 것이 괜찮습니다.
/*父组件自定义元素绑定switch-show事件*/
<t-header :showCancel=showCancel @switch-show="switchShow"></t-header>
// 父组件js
methods: {
//会被子组件$emit触发的方法
switchShow(val) {
this.showCancel = val;
}
}
// 子组件js
methods: {
//按钮上的绑定click事件
switchCancelBoard() {
this.$emit("switch-show", this.ifShowCancel);
}
}로그인 후 복사
로그인 후 복사
그러나 첫 번째 함정을 겪은 후에는 내가 아직 너무 어리다는 것이 분명해졌습니다. 다음은 몇 가지 나쁜 예입니다.
prop의 showCancel 값이 실제로 사용될 수 있습니다. 하위 구성 요소 버튼을 클릭하면
this.showCancel=!this.showCancel이 메뉴 표시를 실현합니다. 숨기지만 콘솔이 열리면 클릭할 때마다 오류가 발생합니다. 🎜🎜🎜vue.esm.js?efeb:578 [Vue 경고]: 상위 구성 요소가 다시 렌더링될 때마다 값을 덮어쓰게 되므로 소품을 직접 변경하지 마세요. 🎜🎜🎜 즉, 상위 구성 요소가 다시 렌더링되면 이 값을 덮어쓰게 되므로 prop 값을 수정하지 마세요.
另外，尽管在这个按钮上实现了显示状态的切换，但是点击其他区域的时候，并不会隐藏它，原因是：子组件prop值的变化并没有影响到父组件，因此showCancel的值一直保持初始值没有变化，而只有在这个值被更新时才会触发子组件中相关值的更新。
——好吧，那么老老实实的用一个计算属性接收showCancel值，这样实现点击子组件控制系统菜单的状态切换；
获得了计算属性ifShowCancel，组件相应的变成了v-show="ifShowCancel"，我试图在绑定事件里通过this.ifShowCancel=!this.ifShowCancel切换菜单状态，报错，得到报错信息：Computed property "ifShowCancel" was assigned to but it has no setter；
明白了，要以直接赋值的形式改变计算属性ifShowCancel的值，需要一个setter函数，但是setter函数中无法修改prop值，因此在getter中也就无法通过return this.showCancel来更新这个计算属性，所以这个方法貌似也行不通；
到此为止，好像路都成了堵死状态：prop值不能改->要用计算属性；计算属性不能改->需要setter；而写入了getter、setter，计算属性的值依赖于prop值->prop值不能改。——一个堪称完美的闭环诞生了！
走投无路之际我想起了$emit和$on这一对。
3. 父子互相通信
前边的prop实现了从父到子的单向通信，而通过$emit和$on，就可以实现从子组件到父组件的通信：这不能直接修改父组件的属性，但却可以触发父组件的指定绑定事件，并将一个值传入父组件。
在这一步我摒弃了点击按钮时的去操作子组件内属性的想法，既然计算属性ifShowCancel依赖于prop值，那么就在点击按钮时，通过$emit触发父组件的事件，并将需要修改的属性值传入父组件，于是：
/*父组件自定义元素绑定switch-show事件*/
<t-header :showCancel=showCancel @switch-show="switchShow"></t-header>
// 父组件js
methods: {
//会被子组件$emit触发的方法
switchShow(val) {
this.showCancel = val;
}
}
// 子组件js
methods: {
//按钮上的绑定click事件
switchCancelBoard() {
this.$emit("switch-show", this.ifShowCancel);
}
}로그인 후 복사
로그인 후 복사
这样处理流程就变成了：点击按钮->作为计算属性的ifShowCancel值传入父组件并触发父组件事件，对showCancel赋值->父组件属性更新->触发子组件prop更新->触发重新compute，更新ifShowCancel值->v-show起作用。
另外在点击其他区域时，通过父组件绑定的click事件，就可以重置showCancel值，进而隐藏掉出现的系统菜单。
下边放出这个功能的完整代码。
4. 完整代码
/*父组件*/
<script>
import THeader from "./components/t-header/t-header";
export default {
name: "app",
components: {
THeader
},
data() {
return {
showCancel: false
};
},
methods: {
hideCancel() {
this.showCancel = false;
},
switchShow(val) {
this.showCancel = val;
}
}
};
</script>
/*子组件*/
Title
你好，管理员！
<script>
export default {
props: {
showCancel: {
type: Boolean
}
},
methods: {
doSomething() {},
switchCancelBoard() {
// this.ifShowCancel = !this.showCancel;
this.$emit("switch-show", !this.ifShowCancel);
}
},
computed: {
ifShowCancel() {
return this.showCancel;
}
}
};
</script>
로그인 후 복사
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
怎样使用vue mint-ui tabbar（附代码）
怎样使用Vue结合Video.js播放m3u8视频
위 내용은 Vue를 사용하여 페이지 오른쪽 상단에 부동/숨겨진 메뉴를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
