02.26 创建一个vue组件

最新推荐文章于 2024-12-01 15:12:23 发布

原创最新推荐文章于 2024-12-01 15:12:23 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

vuejs 同时被 2 个专栏收录

39 篇文章

订阅专栏

web前端

16 篇文章

订阅专栏

本文介绍了一个名为Result.vue的Vue组件，该组件用于显示用户的得分及评价结果。文章详细展示了组件的模板结构，包括得分展示、图标和反馈文本，并介绍了如何通过totalScore属性传递得分值，以及如何在外部文件中引入和使用此组件。

1.Result.vue

<template>
        <div class="hua-result-view" @click="cardDidClick">
            <div class="result">
                <div class="title">您得到了 {{totalScore}} 分</div>
                <div class="iconBox">
                    <img class="icon" :src="linkItem.src">
                </div>
                <ul>
                    <li v-for="text in results">
                        {{text}}
                    </li>
                </ul>
            </div>
            <div class="logoBox1">
                <img class="hw-logo1" src="../../assets/logo.png" alt="">
                <img class="hw-code1" src="../../assets/hw-code.png" alt="">
            </div>
        </div>
</template>

<script>
    export default {
    props: {
            totalScore: {
                type:Number
            }
     },
     watch:{
            totalScore:function (val, oldVal) {
              this.cardInfoAction()
            },
              deep:true
     }
}
</script>

2.PartView

2.1注册组件

<script type="text/javascript">
    import Result from '../../src/components/View/ResultView.vue'
    export default {
        components: {
            'v-result': Result
        }
    }
</script>

2.2 使用组件

<v-result :totalScore="totalNum" v-show="!infoTag"></v-result>