2018-07-26

vue组件相关练习
1、设计组件定义、分类（全局、局部组件）、
2、组件传值、
父传值给子组件，用props参数接收
子传值给父组件，用$emit('自定义方法A',传值内容)；
3、组件调用需要使用子组件定义方法A

HTML

{{msg}}

查询

JS
// 定义组件
Vue.component('fcomp',{
template:

{{title}}

tips! {{ctmsg}} 发送数据

,
props:{
title:{ //title 为自定义属性
type:String,
required:true
}
},
data(){
// 组件返回值是一个对象
return {
content:'我是子组件传的值',
ctmsg:'组件内的信息'
}
},
methods:{
updateInfo(){
//alert('提交数据');
this.$emit('childevent', this.content);
}
}
});

//  实例化vue对象
new Vue({
    el:"#app",
    data:{
        msg:'欢迎来到vue组件 world',
        content:'传到组件内的的信息'
    },
    methods:{
        update(val){
            alert('子组件向父组件传值内容:' + val);
            this.msg = val;
        }
    }
});

image.png

传值后：

image.png