学习笔记Vue(九)——组件components

组件是可复用的 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: '
{{msg}}
'
}) </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: '
{{msg}}
'
} } }) </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:`

{{title}}

{{content}}

`
} } }); </script> </body>

由于上面的title值不符合验证,控制台会报一个错,但不影响显示
学习笔记Vue(九)——组件components_第1张图片

你可能感兴趣的:(Vue学习)