ホームページ > 記事 > ウェブフロントエンド > vue_vue.js でボタン コンポーネントを開発するためのサンプル コード
この記事では主に Vue でボタンコンポーネントを開発するためのサンプルコードを紹介しますので、参考にしてください。見に来てみましょう
最近のインタビューで、Vue でのボタン コンポーネントの作成について質問されました。
その時のアイデアについて話し、戻ってきたときにコードを添付しただけです。
解決策:
親子コンポーネント($refsとprops)を介して通信します
propsはパラメータを受け取り、$refsは子コンポーネントのメソッドを呼び出します
を送信をクリックしてボタンの状態を変更します。失敗した場合は、ボタンの状態をキャンセルします
src/components/
<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>
の下にbutton.vueを作成します。ページ内で呼び出します:
<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. 再利用する場合、親コンポーネント内で子コンポーネントのスタイルを変更することはできません。変更を強制したい場合は、別のものを記述し、スコープ付きを削除してください。
関連する推奨事項:
以上がvue_vue.js でボタン コンポーネントを開発するためのサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。