單獨引入vue.js檔案怎麼寫元件

單獨引入vue.js檔案寫入元件的方法：首先引入vue.js檔案；然後使用「Vue.component」方法建立一個card元件；最後使父頁呼叫該元件即可。

本教學操作環境：windows7系統、vue2.5.17版本，Dell G3電腦。

相關推薦：《vue.js教學》

單獨介紹vue.js檔案如何寫入元件？

1、首先引入vue.js檔案

2、然後使用Vue.component方法建立一個card元件

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

            

                
{{cardTitle}}
            
            

                

                    可以扩展的卡片内容
                    

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

使用：

父親頁面呼叫這個元件，最外層必須是vue的實例id為app的div元素包裹才行。

以上是單獨引入vue.js檔案怎麼寫元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！