温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

单独引入vue.js文件如何写组件

发布时间:2021-01-05 09:40:20 来源:亿速云 阅读:623 作者:小新 栏目:编程语言

这篇文章给大家分享的是有关单独引入vue.js文件如何写组件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

单独引入vue.js文件写组件的方法:首先引入vue.js文件;然后使用“Vue.component”方法创建一个card组件;最后使父页面调用该组件即可。

单独引入vue.js文件如何写组件?

1、首先引入vue.js文件

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>

2、然后使用Vue.component方法创建一个card组件

Vue.component("card",{
    props:{//这里是组件可以接受的参数,也就是相当于面向
           // 原型写组件时的配置参数,用户可以传递不同参数,自己定义组件
        cardTitle:{//卡片标题
            type:String,
            default:'这是一个卡片'
        },
        list:{//列表内容
            type:Array,
            default:[]
        }
    },
    template:`
        <div class="modal">
            <div class="modal-header">
                <h5>{{cardTitle}}</h5>
            </div>
            <div class="modal-content">
                <div>
                    <slot name="modal-content">可以扩展的卡片内容</slot>
                    <ul>
                        <li v-for="(item,index) in list">{{item}}</li>
                    </ul>
                </div>
            </div>
        </div>
    `,
    methods:{//这里定义的组件的方法,利用$emit()进行父子组件通信,子组件通过点击事
             // 件告诉父组件触发一个自定义事件,$emit()方法第二个参数也可以用来传递数据
        okHandle(){
            this.$emit("ok");
        },
        cancelHandle(){
            this.$emit('cancel')
        }
    }
});

使用:

父页面调用这个组件,最外层必须是vue的实例id为app的div元素包裹才行。

<div id="app">
    <div>
        <card :list="list" @ok="okMethods" @cancel="cancelMethods"></card>
    </div>
</div>

感谢各位的阅读!关于“单独引入vue.js文件如何写组件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI