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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。