Vue 父子组件、组件间通信

来源：互联网发布：java 汉字字符长度编辑：程序博客网时间：2024/05/10 16:41

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>组件</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">    <meta name="apple-mobile-web-app-capable" content="yes">    <meta name="apple-mobile-web-app-status-bar-style" content="black">    <script src="../js/Vue.js"></script>    <script>        window.onload = function(){            var vm = new Vue({                el:'#box',                data:{},                components:{                    aaa:{                        template:'<h2>这是aaa组件<bbb></bbb></h2>',                        components:{                            bbb:{                                template:'<h2>这是bbb组件</h2>'                            }                        }                    }                }            });        }    </script></head><body><div id="box">    <aaa></aaa></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script src="../js/vue1.0.js"></script>    <script>        //子组件获取父组件的值        window.onload = function () {            var vm = new Vue({                el: '#box',                data: {                    a: 'aaa'                },                components: {                    'aaa': {                        data(){                            return {                                msg: 111,                                msg2: '这是父组件的数据'                            }                        },                        template: '#aaa',                        components: {                            'bbb': {                                //html中的my-msg这种形式,js中应该采用驼峰命名myMsg                                props: ['mmm', 'myMsg'],                                template: '<h3>我是bbb组件->{{mmm}}<br>{{myMsg}}</h3>'                            }                        }                    }                }            });        }    </script></head><body><div id="box">    <aaa>    </aaa></div><template id="aaa">    <h1>11111</h1>    <bbb :mmm="msg2" :my-msg="msg"></bbb></template></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <script src="../js/vue1.0.js"></script>    <script>        //子组件获取父组件的值        window.onload = function () {            var vm = new Vue({                el: '#box',                data: {                    a: 'aaa'                },                components: {                    'aaa': {                        data(){                            return {                                msg: 111,                                msg2: '这是父组件的数据'                            }                        },                        template: '#aaa',                        components: {                            'bbb': {                                //html中的my-msg这种形式,js中应该采用驼峰命名myMsg                                props: ['mmm', 'myMsg'],                                template: '<h3>我是bbb组件->{{mmm}}<br>{{myMsg}}</h3>'                            }                        }                    }                }            });        }    </script></head><body><div id="box">    <aaa>    </aaa></div><template id="aaa">    <h1>11111</h1>    <bbb :mmm="msg2" :my-msg="msg"></bbb></template></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>父组件获取子组件的值</title>    <script src="../js/vue1.0.js"></script>    <script>        //父组件获取子组件的值        window.onload = function () {            var vm = new Vue({                el:'#box',                data:{                    a:'aaa'                },                components:{                    'aaa':{                        data(){                            return {                                msg:111,                                msg2:'我是父组件的数据'                            }                        },                        template:'#aaa',                        methods:{                            get(msg){                                this.msg = msg;                            }                        },                        components:{                            'bbb':{                                data(){                                    return {                                        a:'我是子组件的数据'                                    }                                },                                template:'#bbb',                                methods:{                                    send(){                                        this.$emit('child-msg',this.a);                                    }                                }                            }                        }                    }                }            });        }    </script></head><body><div id="box">    <aaa></aaa></div><template id="aaa">    <span>我是父级 -》 {{msg}}</span>    <bbb @child-msg="get"></bbb></template><template id="bbb">    <h3>子组件</h3>    <input type="button" value="send" @click="send" /></template></body></html>

0 0