vue component 组件的使用

最新推荐文章于 2024-05-07 01:25:59 发布

安果移不动

最新推荐文章于 2024-05-07 01:25:59 发布

阅读量578

点赞数

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

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/122474511

版权

vue 专栏收录该内容

106 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>

</head>
<body>
<div id="app">
    <button-counter>

    </button-counter>
</div>
<script>
    Vue.component('button-counter', {
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">You click me {{count}} times</button>'
    });
    var vm = new Vue({
        el: "#app",
    });
</script>
<style>

</style>
</body>
</html>

点击按钮会增加次数

多个组件互相不会影响

如何传递属性进来？

<div id="app">
    <button-counter title="我是传递过来的参数"></button-counter>
    <button-counter></button-counter>
</div>
<script>
    Vue.component('button-counter', {
        props: ['title'],
        data: function () {
            return {
                count: 0
            }
        },
        template: '<button v-on:click="count++">title {{title}}You click me {{count}} times</button>'
    });
    var vm = new Vue({
        el: "#app",
    });
</script>

some times 我们需要多个标签

        template: '<div> <h1>请注意。只能有一个标签哦</h1><button v-on:click="clickfun">title {{title}}You click me {{count++}} times</button></div>',

这个里面只能有一个大标签。多个标签也只有外面的生效所以要用div包裹

我们要监听里面的数据变化如何操作？

总代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>

</head>
<body>
<div id="app">
    <button-counter title="我是传递过来的参数" @clicknow="clicknow"></button-counter>
    <button-counter></button-counter>
</div>
<script>
    Vue.component('button-counter', {
        props: ['title'],
        data: function () {
            return {
                count: 0
            }
        },
        template: '<div> <h1>请注意。只能有一个标签哦</h1><button v-on:click="clickfun">title {{title}}You click me {{count}} times</button></div>',
        methods: {
            clickfun: function () {
                this.count++;
                this.$emit('clicknow', this.count)
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        methods: {
            clicknow: function (e) {
                console.log(e);
            }
        }
    });
</script>
<style>

</style>
</body>
</html>

传入内容

你看这里是不是中间差点什么东西

有没有方法把空间传递到这里面去

   <button-counter title="我是传递过来的参数" @clicknow="clicknow"></button-counter>

像这样

    <button-counter title="我是传递过来的参数" @clicknow="clicknow"><h3>我是传递过来的插件</h3></button-counter>

针对模板里面要新增一个solt插件

        template: '<div> <h1>请注意。只能有一个标签哦</h1><button v-on:click="clickfun">title {{title}}You click me {{count}} times</button> <br> <slot></slot></div>',

安果移不动

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue component 组件的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script></head><body><div id="app"> <button-counter> .
复制链接

扫一扫