2018-07-26

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

HTML
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-8">
<br />
<input type="text" class="form-control" placeholder="请输入进行查询" />
<br />
<div class="alert alert-success">
{{msg}}
</div>
</div>
<div class="col-md-4">
<br />
<button type="button" class="btn btn-primary">查询</button>
</div>
</div>
<div class="row">
<div class="col-md-8">

<fcomp v-bind:title='content' v-on:childevent='update'></fcomp>
</div>
</div>
</div>
</div>

JS
// 定义组件
Vue.component('fcomp',{
template:<div class="alert alert-warning alert-dismissible" role="alert"> <h3>{{title}}<h3><br /> <strong>tips!</strong> {{ctmsg}} <button @click='updateInfo()' class="btn btn-success">发送数据</button> </div>,
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