Vue组件通讯:单个组件

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

单个组件相对而言简单一点。在我看来,有些事情你需要知道才能让你开始。关于Vue组件的模板和脚本部分如何协同工作的。模板和脚本组成一个单元,并共享相同的数据。最好的学习就是通过一些实例来阐述,这样更易于交流。

模板到脚本:事件

在UI中用户事件之后用户可以使用一些用户事件。在模板中@click="handleClick"将会调用handleClick方法。

<template>
    <button @click="handleClick">
        Tacos?
    </button>
</template>

<script>
    export default {
        name: 'SingleComponent',
        methods: {
            handleClick () {
                alert('Tacos!')
            }
        }
    }
</script>

效果如下:

点击示例中的button会有一个alert弹出来。如下所示:

上面示例中,采用的是x-template定义组件模板的方式。如果你对创建组件模板方式了解不多,建议阅读《Vue.js 定义组件模板的七种方式》一文。至于在示例中采用哪一种方式,根据自己的喜好或项目需求来做。

再次回到我们示例中来,在上面的示例中,我们稍做调整,你就可以传参数到handleClick()方法中:

<template>
    <button @click="handleClick('Tacos')"> Tacos? </button>
</template>

<script>
    export default {
        name: 'SingleComponent',
        methods: {
            handleClick (value) {
                alert(`${value}!`)
            }
        }
    }
</script>

上面这个示例,在handleClick()方法中传了一个value参数。在@click调用handleClick()方法时传了一个Hel

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-js-communication-single-component.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部