vue自定义组件

最新推荐文章于 2024-06-14 22:06:46 发布

一只特立独行的猫猫

最新推荐文章于 2024-06-14 22:06:46 发布

阅读量603

点赞数

分类专栏： vue 文章标签： vue自定义组件

本文链接：https://blog.csdn.net/fhjdzkp/article/details/80201311

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

vue中如何实现自定义组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text</title>
    <script src="../assets/jquery-3.1.1.min.js"></script>
    <script src="../assets/vue.js"></script>
</head>
<body>
    <div id="app">
        <wpwp :aaaaa="name"></wpwp>
    </div>
    <script>
        Vue.component('wpwp',{
            template: '<div @click="al">这是一个子组件----{{this.aaaaa}}</div>',
            data:function () {
                return {
                    age: 18
                }
            },
            props:["aaaaa"],
            methods:{
                al:function(){
                    console.log(this.aaaaa);
                }
            }
        });

        new Vue({
            el: '#app',
            data:{
                name: 'weeeepwp'
            }
        })
    </script>
</body>
</html>

自定义组件时，如果想要实现子组件可以访问vue实例中的属性，那么需要在子组件中设置props属性，props是一个数组，在使用组件的地方，使用props数组中的值，名字要和props中的一致，值的名字要和vue实例中data中的属性一致，这样就实现了父子的绑定，当在子组件中使用的时候，只需要使用this.props中的数组名就可以得到vue实例中的data的值