vue2.0+基础知识连载（14）--- 局部组件与全局组件

最新推荐文章于 2023-07-21 14:34:29 发布

宇智波幽助

最新推荐文章于 2023-07-21 14:34:29 发布

阅读量224

点赞数

分类专栏： vue 文章标签： vue 局部组件全局组件

本文链接：https://blog.csdn.net/yuzhiboyouzhu/article/details/79116109

版权

vue 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <title>vue2.0+基础知识连载（14）--- 局部组件与全局组件</title>
</head>

<body>

    <h3>vue2.0+基础知识连载（14）--- 局部组件与全局组件</h3>

    <div id='app'>
        <h5>局部组件</h5>
        <fatherlocal></fatherlocal>
        <hr>
        <h5>全局组件</h5>
        <father></father>
        <hr>
        <h5>全局组件</h5>
        <child :fromfather='giveData'></child>
    </div>

    <!-- 局部组件模板 -->
    <template id="father-local">
        <div>
            <h3>这是{{name}}</h1>
            <div>
                <p>这是{{data}}</p>
            </div>
        </div>
    </template>

    <!-- 全局组件模板 -->
    <template id="father">
        <div>
            <h3>这是{{name}}</h1>
            <div>
                <p>这是{{data}}</p>
            </div>
        </div>
    </template>

    <template id="child">
        <div>
            <h3>这是{{name}}</h3>
            <div>
                <p>{{cmsgtwo}}</p>
                <p>{{cmsg}}</p>
                <p>{{fromfather}}</p>
                <p>{{fromfather.fmsg}}</p>
                <p><input type="button" value="按钮" @click="change"></p>
            </div>
        </div>
    </template>

    <script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>
    <script type="text/javascript">

        // 定义组件
        var FATHER = {
            template: "#father",
            data: function() {
                return {
                    name: "父组件",
                    data: "父组件里的数据"
                }
            }
        };

        var CHILD = {
            template: "#child",
            data: function() {
                return {
                    name: "子组件",
                    cmsg: "子组件里的第一个数据",
                    cmsgtwo: "子组件里的第二个数据"
                }
            },
            methods: {
                change: function() {
                    this.fromfather.fmsg = "子组件数据被更改了"
                }
            },
            mounted: function() {
                this.cmsg = this.fromfather;
            },
            props: ["fromfather"],
        };

        // 注册组件
        Vue.component('father', FATHER);
        Vue.component("child", CHILD);

        var vm = new Vue({
            data: {
                fmsg: "data里的数据",
                giveData: {
                    fmsg: "这是父组件里的数据"
                }
            },
            methods: {},
            components: {
                'fatherlocal': {
                    template: '#father-local',
                    data: function() {
                        return {
                            name: "局部-父组件",
                            data: "局部-父组件里的数据"
                        }
                    }
                }
            }
        }).$mount('#app');

    </script>
</body>
</html>

宇智波幽助

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2.0+基础知识连载（14）--- 局部组件与全局组件

<!DOCTYPE html><html><head> <title>vue2.0+基础知识连载（14）--- 局部组件与全局组件</title></head><body> <h3>vue2.0+基础知识连载（14）--- 局部组件与全局组件</h3> <div id='app'> <h5>局部组件</h5> <fatherlocal></fa
复制链接

扫一扫

专栏目录