不用vue-cli 创建vue组件

最新推荐文章于 2022-06-30 14:47:28 发布

木子李双木霖

最新推荐文章于 2022-06-30 14:47:28 发布

阅读量421

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/Y_web/article/details/119421978

版权

不使用vue-cli 创建组件

1.局部组件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <custom-part1></custom-part1>
    </div>
    <template id="Local1">
        <div>局部组件</div>
    </template>
</body>
<script type="text/javascript">
    // 局部组件
    const part1 = {
        template: '#Local1',
        data() {
            return {}
        }
    }
    new Vue({
        el: '#app',
        components: {
            'custom-part1': part1,
        }
    })
</script>
</html>

2.全局组件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
         <custom-global1></custom-global1>
    </div>
    <template id="Global">
        <div>全局组件</div>
    </template>
</body>
<script type="text/javascript">
    //全局组件
    Vue.component('custom-global1', {
        template: '#Global',
        data() {
            return {}
        }
    })
    new Vue({
        el: '#app',
    })
</script>
</html>

3.动态组件extend

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <custom-part2></custom-part2>
</body>
<script type="text/javascript">
    var part2 = Vue.extend({
        template: "<div>局部组件2</div>",
        data: function () {
            return {
            }
        }
    });
    new part2().$mount('custom-part2');
</script>
</html>

4.extend传参方式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <custom-part3></custom-part3>
</body>
<script type="text/javascript">
    var part3 = Vue.extend({
        template: "<div>{{text}}</div>",
        data: function () {
            return {}
        },
        props: ['text']
    });
    new part3({ propsData: { text: '局部组件3传参' } }).$mount('custom-part3');
</script>
</html>

5.extend与component配合使用

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="app">
        <extend-component></extend-component>
    </div>
</body>
<script type="text/javascript">
    var part = Vue.extend({
        template: "<div>extend与component配合</div>",
        data: function () {
            return {}
        }
    })
    Vue.component("extend-component", part);
    new Vue({
        el: '#app',
    })
</script>
</html>

6.组件函数调用

<body>
    <div id="app">
        <custom-global1></custom-global1>
    </div>
    <template id="Global">
        <div @click='bb()'>全局组件</div>
    </template>
</body>
<script>
    var bus = new Vue()
    bus.$on('text', function (val) {
        console.log(val)
    })
    Vue.component('custom-global1', {
        template: '#Global',
        methods: {
            bb() {
                bus.$emit('text', 2)
            },
        }
    })
    let vm = new Vue({
        el: '#app',
    })
</script>

木子李双木霖

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
不用vue-cli 创建vue组件

不使用vue-cli 创建组件1.局部组件<html lang="en"><head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script></head><body> <div id="app"> <custom-part1&gt
复制链接

扫一扫