单独引入vue.js文件如何写组件-创新互联

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

网站建设、成都网站制作的关注点不是能为您做些什么网站，而是怎么做网站，有没有做好网站，给创新互联一个展示的机会来证明自己，这并不会花费您太多时间，或许会给您带来新的灵感和惊喜。面向用户友好，注重用户体验，一切以用户为中心。

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

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

1、首先引入vue.js文件

Vue.component("card",{
    props:{//这里是组件可以接受的参数，也就是相当于面向
           // 原型写组件时的配置参数，用户可以传递不同参数，自己定义组件
        cardTitle:{//卡片标题
            type:String,
            default:'这是一个卡片'
        },
        list:{//列表内容
            type:Array,
            default:[]
        }
    },
    template:`
        
            
                {{cardTitle}}

可以扩展的卡片内容

`, methods:{//这里定义的组件的方法，利用$emit()进行父子组件通信，子组件通过点击事 // 件告诉父组件触发一个自定义事件，$emit()方法第二个参数也可以用来传递数据 okHandle(){ this.$emit("ok"); }, cancelHandle(){ this.$emit('cancel') } } });

使用：

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

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

单独引入vue.js文件如何写组件-创新互联

{{cardTitle}}

其他资讯