组件(vue拓展)

组件内通讯

html文件

    

        
组件
        
        
    
    
    
    

js文件

//全局组件
var AAA = Vue.extend({
    template:"
{{msg}}
",
    data(){
        return { msg:"这是组件中的数据"}
    },
    methods:{
        change(){
            this.msg +="-!!"
        }
    }
})//组件中，data必须是函数
Vue.component('aaa',AAA)
var vue = new Vue({
    el:"#app",
    components:{
        'bbb':{//'bbb'为组件的名字(<>中的红字)
            data(){
                return {
                    question:"你喜欢吃什么水果？",
                    options:["桃子","香蕉","葡萄"],
                    rs:''
                }
            },
            methods:{
                select(rs){
                this.rs = rs;
                },
                getMsg(data){
                    this.rs = data;
                }
            },//子组件 
            components:{
                'bbb-child1':{
                    //从父亲接受数据   父亲往儿子传参
                    //props:['msg','aaa'],
                    props:{
                        'msg':String,
                        'aaa':Number
                    },//中括号为数组传参，大括号为对象传参，可以设定参数类型
                    data(){
                        return{
                            //msg:"123" 父亲传过来的数据不能更改。可以传给其他变量后再更改
                            msg_child:this.msg,
                            child:"aaaaa"
                        }
                    },
                    //从儿子向父亲传参
                    methods:{
                        send(){
                            msg_child = '123',
                            console.info(msg_child),
                            //emit 触发 将数据child传给父亲方法getMsg的data参数
                            this.$emit('child-msg',this.child)
                        }
                    },
                    template:"
{{this.msg}},aaa:{{aaa+1}}
"//双引号内的内容为组件架构
                }
            },
            template:"#bbb",//选定id为'bbb'的template为组件架构
        }
    }
})

组件间通讯

    
    


    

        展示孩子中的数据
        
        
        
        孩子中的数据:{{msg}}