学习笔记Vue（九）——组件components

最新推荐文章于 2024-04-02 17:04:05 发布

GRANDMA_Z

最新推荐文章于 2024-04-02 17:04:05 发布

阅读量1.2k

点赞数

分类专栏： Vue学习文章标签： Vue JavaScript

本文链接：https://blog.csdn.net/qq_38932377/article/details/94901791

版权

Vue学习专栏收录该内容

24 篇文章 0 订阅

订阅专栏

组件是可复用的 Vue 实例，且带有一个名字，可以在html中以一个标签的形式使用组件。
组件中有自己的data，是一个函数的形式，return一个对象，里面包含的值可以在他的template中使用。
template里的内容会渲染在html中的组件标签里。
在components里写的组件名要使用小驼峰式写法，但在html标签里要转换成小写中间以一个横杠分隔。
例子：
全局组件：

<body>
	<div id="app">
        <hello-world></hello-world>
    </div>

	<script>
		//全局组件component  不带s
         Vue.component('hello-world',{   
         //组件命名，连字符式   或者驼峰式  但标签必须都写连字符式  html标签里不允许大写
             data (){
                 return {
                     msg: 'hello world!!!'
                 }
             },
             template: '<div>{{msg}}</div>'
         })
     </script>
 </body>

局部组件：

<body>
	<div id="app">
        <hello-world></hello-world>
    </div>

	<script>
		var vm = new Vue({
            el: '#app',
            data: {
            },
            //局部属性里components要加s
            components: {
                helloWorld:{
                    data (){
                        return {
                            msg: 'hello world!!!'
                        }
                    },
                    template: '<div>{{msg}}</div>'
                }
            }
        })
     </script>
 </body>

Prop属性

Prop 是你可以在组件上注册的一些自定义特性。
通过代码来讲解：

<body>
    <div id="app">
        <my-content a="1" b="2" :title="9" :content="content"></my-content>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                content: 'jskjklsjkldfj',
                title: 'jjjjj'
            },
            components: {
                myContent: {
                    // props:['title','content'],
                    props: {
                        content: {
                            type: String, //值的类型
                            default: 'kkkkkkkkkkkk' // 默认值
                        },
                        title: {
                            type: Number,
                            validator (value) { //自定义验证函数
                                return value >=10
                            },
                            required: true
                        },
                        arr: {
                            type: Array,
                            default: ()=> [1, 2, 3]
                        }
                    },
                    template:`<div>
                        <h3>{{title}}</h3>
                        <p>{{content}}</p>
                    </div>`
                }
            }

        });
    </script>
</body>

由于上面的title值不符合验证，控制台会报一个错，但不影响显示
在这里插入图片描述

GRANDMA_Z

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学习笔记Vue（九）——组件components

组件是可复用的 Vue 实例，且带有一个名字，可以在html中以一个标签的形式使用组件。组件中有自己的data，是一个函数的形式，return一个对象，里面包含的值可以在他的template中使用。template里的内容会渲染在html中的组件标签里。在components里写的组件名要使用小驼峰式写法，但在html标签里要转换成小写中间以一个横杠分隔。例子：全局组件：<bod...
复制链接

扫一扫