이 글에서는 주로 Vue에서 버튼 컴포넌트를 개발하기 위한 샘플 코드를 소개하고 있습니다. 참고용으로 공유하겠습니다.
최근 인터뷰에서 Vue에서 버튼 컴포넌트를 만드는 것에 대한 질문을 받았습니다.
그때 아이디어만 이야기하고 돌아와서 코드를 첨부했습니다.
해결책:
부모-자식 구성 요소($refs 및 props)를 통해 통신합니다.
props는 매개 변수를 허용하고 $refs는 하위 구성 요소
의 메서드를 호출하여 제출을 클릭하여 버튼 상태를 변경합니다. 실패하면 버튼 상태를 취소하세요
src/comComponents/
<template> <!-- use plane --> <!-- 传入bgColor改变按钮背景色 --> <!-- state切换button的状态 调用cancel()可以切换 --> <!-- text为按钮文字 --> <p class="container"> <button @click="confirm" :disabled="state" class="confirm" :style="{background: btnData.bgColor}" >{{text}}</button> </p> </template> <script> export default { data(){ return { text: this.btnData.text, state: false, } }, props: { btnData: { types: Array, default() { return { text: '确认', } } } }, methods: { confirm(){ this.text += '...' this.state = true //这里是激活父组件的事件,因为子组件是不会冒泡到父组件上的,必须手动调用$emit //相对应父组件要在调用该组件的时候,将其挂载到上面 this.$emit("confirm") }, cancel(){ this.text = this.btnData.text this.state = false } } } </script> <style lang="less" scoped> .confirm { border: none; color: #fff; width: 100%; padding: 1rem 0; border-radius: 4px; font-size: 1.6rem; background: #5da1fd; &:focus { outline: none; } } </style>
페이지에서 호출하세요:
<template> <p class="btn-box"> <Btn :btnData="{text: '确认注册'}" <!--这里就要挂载$emit调用的事件 @confirm="想要调用事件的名字"--> @confirm="confirm" ref="btn" ></Btn> </p> </template> <script> import Btn from '@/components/button' export default { components: { Btn }, methods: { confirm(){ if(!this.companyName){ this.$toast("公司名不能为空") this.$refs.btn.cancel() } } } </script>
여기에서 몇 가지 세부 사항에 주의해야 합니다:
1. 버튼 컴포넌트가 형성되면 다른 p 요소와 상호 작용하게 됩니다. 간격이 컴포넌트 내에 고정되어 있으면 재사용하기 어렵습니다.
2. 재사용 시 상위 컴포넌트에서는 하위 컴포넌트의 스타일을 변경할 수 없습니다. 강제로 변경하려면 별도로 작성하고 범위를 제거하세요.
위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
Ajax를 사용하여 새로 고침 없이 페이지 콘텐츠와 주소 표시줄 URL 변경
위 내용은 Vue에서 버튼 구성 요소를 개발하기 위한 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!