How to write components by introducing vue.js file separately

How to introduce the vue.js file separately to write components: first introduce the vue.js file; then use the "Vue.component" method to create a card component; and finally make the parent page call the component.

The operating environment of this tutorial: windows7 system, vue2.5.17 version, Dell G3 computer.

Related recommendations: "vue.js Tutorial"

How to write components by introducing vue.js files separately?

1. First introduce the vue.js file

2, and then use the Vue.component method to create a card component

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')
        }
    }
});

Use:

Parent page To call this component, the outermost layer must be wrapped by a div element with the instance ID of vue as app.

The above is the detailed content of How to write components by introducing vue.js file separately. For more information, please follow other related articles on the PHP Chinese website!