Vue_组件

Posted 2020-12-16 wangdianchao

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue_组件相关的知识，希望对你有一定的参考价值。

1.定义方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.min.js"></script>
    <title>组件</title>
</head>
<body>
<div id="app01">
    <today-weather></today-weather>
    <my-weather></my-weather>
</div>

<script>
    // 全局组件定义方法
    Vue.component(‘today-weather‘, {
        template: ‘<div><h1>今天下雨，出不去啦,全局组件</h1></div>‘
    })
    var vm = new Vue({
        el: ‘#app01‘,
        data: {},
        // 局部组件定义方法
        components: {
            ‘my-weather‘: {
                template: ‘<div><h1>今天下雨，出不去啦,局部组件</h1></div>‘
            }
        }
    })
</script>
</body>
</html>

2.表行组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.min.js"></script>
    <title>表行组件</title>
</head>
<body>
<div id="app01">
    <table border="1">
        <tr>
            <td>编号</td>
            <td>游戏名称</td>
        </tr>
<!--        表行组件的引用必须用is属性引入-->
        <tr is="my_row1"></tr>
        <tr is="my_row2"></tr>
        <tr is="my_row3"></tr>
    </table>
</div>

<script>
    Vue.component(‘my_row1‘, {
        template: ‘<tr><td>(1)</td><td>英雄岛</td></tr>‘
    })
    Vue.component(‘my_row2‘, {
        template: ‘<tr><td>(2)</td><td>地下城与勇士</td></tr>‘
    })
    Vue.component(‘my_row3‘, {
        template: ‘<tr><td>(3)</td><td>英雄联盟</td></tr>‘
    })
    let vm = new Vue({
        el: ‘#app01‘,
        data: {}
    })
</script>
</body>
</html>

以上是关于Vue_组件的主要内容，如果未能解决你的问题，请参考以下文章

vscode代码片段生成vue模板

vue3中的fragment（片段）组件

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

Vue组件之全局组件与局部组件

vue-个人学习----组件