VUE学习：vue基础11————组件：组件的模板

最新推荐文章于 2024-04-29 16:05:06 发布

北凉冬

最新推荐文章于 2024-04-29 16:05:06 发布

阅读量653

点赞数

分类专栏： vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/GAlbinus/article/details/117200538

版权

vue.js 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

提示：
本文为VUE栏目：VUE学习：vue基础11————组件：组件的模板

VUE学习：vue基础11————组件：组件的模板

前言
组件
组件的模板

前言

本文vue框架中组件相关。

提示：以下是本篇文章正文内容，下面案例可供参考

组件

组件的模板

模板化自定义组件

<body>
<div id="app">
    <test1></test1>
</div>

<template id="t1">
    <h3>我是模板化的自定义组件</h3>
</template>


</body>

<script>
    Vue.component('test1',Vue.extend({
        template:'#t1',

    }));
    let vm = new Vue({
        /*全局组件中使用模板*/
        el: "#app",
        data: {},
        methods: {},
        components:{
        }
    });
</script>

模板中的标签也必须只能有一个跟标签

<body>
<div id="app">
    <test2></test2>
</div>
<template id="t2">
    <div>
        <ul>
            <li>选项一</li>
            <li>选项二</li>
            <li>选项三</li>
        </ul>
        <ol>
            <li>选项一</li>
            <li>选项二</li>
            <li>选项三</li>
        </ol>
    </div>
</template>

</body>
<script>
    let vm = new Vue({
        /*全局组件中使用模板*/
        el: "#app",
        data: {},
        methods: {},
        components:{
            test2:{
                template: '#t2'
            },
        }
    });
</script>

使用script标签作为模板

使用script标签作为模板必须指定id和type的值;x-template

<body>
<div id="app">
    <test3></test3>
</div>
</body>

<script id="t3" type="x-template">
    <div>
        <p>script标签中的模板内容1</p>
        <p>script标签中的模板内容2</p>
        <p>script标签中的模板内容3</p>
    </div>
</script>
<script>
    let vm = new Vue({
        /*全局组件中使用模板*/
        el: "#app",
        data: {},
        methods: {},
        components:{
            test3:{
                template: '#t3'
            }
        }
    });
</script>

组件中的data和methods

自定义组件

自定义组件中的data属性必须是一个函数类型，并且这个函数一定要返回一个对象类型

<body>
<div id="app">
    <cf></cf>
</div>
<template id="t1">
    <p @click="cf">{{msg}}</p>
</template>
</body>  
<script>
    Vue.component('cf',Vue.extend({
        template:'#t1',
        /*自定义组件中的data属性必须是一个函数类型，并且这个函数一定要返回一个对象类型*/
        data:function () {
            return{
                msg:"三亿鼠标的梦想"

            }
        },
        methods:{
            cf(){
                this.msg="黑色小镇"
            }
        }

    }));
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
    });
</script>

模板化定义组件

<body>
<div id="app">
    <cf2></cf2>
</div>
<template id="t1">
    <p @click="cf">{{msg}}</p>
</template>
</body>  
<script>
    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components:{
            cf2:{
                template: '#t1',
                data(){
                    return{
                        msg:"火麒麟"
                    }
                },
                methods:{
                    cf(){
                        this.msg='Ak-47';
                    }
                }
            }
        }
    });
</script>

北凉冬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE学习：vue基础11————组件：组件的模板

提示：本文为VUE栏目：VUE学习：VUE学习：vue基础10————组件：组件的模板VUE学习：VUE学习：vue基础10————组件：组件的模板前言组件组件的模板模板化自定义组件模板中的标签也必须只能有一个跟标签使用script标签作为模板组件中的data和methods自定义组件模板化定义组件前言本文vue框架中组件相关。提示：以下是本篇文章正文内容，下面案例可供参考组件组件的模板模板化自定义组件<body><div id="app"> <
复制链接

扫一扫