Vue 父组件和子组件相互通讯

时间 2019-11-25

标签 vue 组件相互通讯繁體版

原文原文链接

父组件通讯到子组件javascript

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
            padding: 0;
            margin: 0;
        }
        .main{
            width: 100%;
        }
        .head{
            width: 100%;
            height: 80px;
            background-color: purple;

        }
        .main2{
            width: 100%;
            height: 1000px;
        }
        .main2 .aside{
            float: left;
            width: 30%;
            height: 100%;
            background-color: green;
        }
        .main2 .content{
            float: left;
            width: 70%;
            height: 100%;
            background-color: red;
        }
    </style>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript">
            // 全局组件
            // 第一个参数是组件的名字，第二个参数是options
            Vue.component('Vbtn', {
                template: `
                　　<button>按钮</button>
            　　`
            });

            // 1.在父组件中  先绑定  :自定义的属性名 = posts
            // 2.子要声明 props:['自定义的属性名']  来接收
            // 3.收到了就是本身 你能够任意使用
            var Vcontent = {
                template: `
                    <div class='content'>我是内容组件
                        <ul>
                            <li v-for = '(item,index) in posts'>
                                <h3>{{item.title}}</h3>
                                <h4>{{item.content}}</h4>
                            </li>
                        </ul>
                    </div>
                `,
                props: ['posts']
            }

            var Vaside = {
                template: `
                    <div class='aside'>我是侧边栏组件
                    </div>
                `
            };


            // 局部组件：声子  挂子 用子
            var Vheader = {
                template: `
                    <div class='head'>
                        我是头部组件
                        
                    </div>
                `
            };


            // 1.声明局部组件 App入口组件
            var App = {
                template: `
                    <div class='main'>
                        <Vheader />
                        <div class = 'main2'>
                            <Vaside />
                            <Vcontent  :posts = 'posts'/>
                        </div>
                    </div>
                `,
                data() {
                    return {
                        posts: [{
                                id: 1,
                                title: "个人第一篇博客",
                                content: '天王该帝王'
                            },
                            {
                                id: 2,
                                title: "个人第二篇博客",
                                content: '小鸡炖蘑菇'
                            },
                            {
                                id: 3,
                                title: "个人第三篇博客",
                                content: '宝塔镇河妖'
                            }
                        ]

                    }
                },
                components: {
                    Vheader,
                    Vaside,
                    Vcontent
                }
            };

            new Vue({
                el: '#app',
                // 3.使用
                template: '<App></App>',
                data() {
                    return {

                    }
                },
                // 2.挂载组件
                components: {
                    App
                }
            });
        </script>
    </body>
</html>

经过事件向父组件发送消息html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
            padding: 0;
            margin: 0;
        }
        .main{
            width: 100%;
        }
        .head{
            width: 100%;
            height: 80px;
            background-color: purple;

        }
        .main2{
            width: 100%;
            height: 1000px;
        }
        .main2 .aside{
            float: left;
            width: 30%;
            height: 100%;
            background-color: green;
        }
        .main2 .content{
            float: left;
            width: 70%;
            height: 100%;
            background-color: red;
        }
    </style>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript">
            // 全局组件
            // 第一个参数是组件的名字，第二个参数是options
            Vue.component('Vbtn', {
                template: `
                　　<button>按钮</button>
            　　`
            });

            var Vcontent = {
                template: `
                    <div class='content'>我是内容组件
                        <ul>
                            <li v-for = '(item,index) in posts'>
                                <h3>{{item.title}}</h3>
                                <h4>{{item.content}}</h4>
                            </li>

                        </ul>
                    </div>
                `,
                props: ['posts']
            }

            var Vaside = {
                template: `
                    <div class='aside'>我是侧边栏组件
                    </div>
                `
            };


            // 1.在父组件中  先绑定  :自定义的属性名 = posts
            // 2.子要声明 props:['自定义的属性名']  来接收
            // 3.收到了就是本身 你能够任意使用
            var Vheader = {
                template: `
                    <div class='head'>
                        我是头部组件
                        <button @click = 'changeFontSize'>字体变大</button>
                        
                    </div>
                `,
                methods: {
                    changeFontSize() {

                        // 触发父组件 中声明的自定义事件   vue $emit()
                        // 第一个参数是触发自定义事件的名字 第二个参数就是传进去的值
                        this.$emit('change')
                    }
                }
            };


            // 1.声明局部组件 App入口组件
            var App = {
                template: `
                    <div class='main' :style = '{fontSize:postFontSize+"em"}'>
                        <Vheader @change = 'changeHandler'/>
                        <div class = 'main2'>
                            <Vaside />
                            <Vcontent  :posts = 'posts'/>
                        </div>
                    </div>
                `,
                methods: {
                    changeHandler() {
                        this.postFontSize += .1;
                    }
                },
                data() {
                    return {
                        posts: [{
                                id: 1,
                                title: "个人第一篇博客",
                                content: '天王该帝王'
                            },
                            {
                                id: 2,
                                title: "个人第二篇博客",
                                content: '小鸡炖蘑菇'
                            },
                            {
                                id: 3,
                                title: "个人第三篇博客",
                                content: '宝塔镇河妖'
                            }


                        ],
                        postFontSize: 1

                    }
                },
                components: {
                    Vheader,
                    Vaside,
                    Vcontent
                }
            };

            new Vue({
                el: '#app',
                // 3.使用
                template: '<App></App>',
                data() {
                    return {

                    }
                },
                // 2.挂载组件
                components: {
                    App
                }
            });
        </script>
    </body>
</html>