2018-07-26

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

HTML











{{msg}}















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

,
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

你可能感兴趣的:(2018-07-26)