VUE多组件通信

原创于 2018-04-19 09:39:55 发布 · 244 阅读

0 ·

CC 4.0 BY-SA版权

学习专栏收录该内容

10 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
            <my-parent :imgsrc="img" :imgtitle="title"></my-parent>
    </div>
    <template id="parent">
        <div id="my_parent">
            <my-title :title="imgtitle"></my-title>
            <my-img :imgsrc="imgsrc"></my-img>
        </div>
    </template>

    <template id="my_title">
        <h2>{{title}}</h2>
    </template>

    <template id="my_img">
        <img :src="imgsrc" alt="">
    </template>

    <script>
        let my_title = Vue.extend({
            template: '#my_title',
            props: ['title']
        })

        let my_img = Vue.extend({
            template: '#my_img',
            props: ['imgsrc']
        })

        Vue.component('my-parent', {
            template: '#parent',
            props: ['imgsrc', 'imgtitle'],
            components: {
                'my-title': my_title,
                'my-img': my_img
            }
        })

        new Vue({
            el: '#app',
            data: {
                img: './js/01.png',
                title: '简体字好看多了，容易写！'
            }
        })
    </script>
</body>

</html>