vue Notes-vue组件

一.vue组件:

1.全局组件用Vue.component()方法,先传入一个自定义组件的名字,然后再进行配置,所有的Vue实例都可以使用。
2.局部组件过某个Vue实例的实例选项components属性来注册多个组件。

1.全局组件和局部组件

全局组件语法

    Vue.component('模板名', {
        template:// 组件内容
    })

    new Vue({
        el: '绑定的id',
        data:{
            
        },
        methods:{

        }
    })

局部组件语法

    var app = new Vue({
        el: '#绑定的id',
        data: {

        },
        methods:{

        }
        components: {
        '组件名1': {
            template: //模板内容,
        },
       '组件名2': {
            template: //模板内容,
        },
        }
    })

自定义组件注意事项
自定义组件注意事项

组件和指令的区别

组件是一个标签,指令是已有标签的一个属性。

Component组件的props属性

Component组件的props属性的作用是设置和获取标签上的属性值。

一、定义属性并获取属性值

有这样一个自定义的组件<github></github>,将其赋予url超链接<github url="https://github.com"></github>

<div id="app">
	<github url="https://github.com"></github>
</div>

定义属性需要使用props选项,加上数组形式的属性名称 :props:[‘url’]。在组件的模板里读出属性值只需要用插值的形式:

var vm = new Vue({
	el:'#app',
	components:{
		'github':{
			template:'<div>github url is {{ url }} </div>',
			props:['url']
		}
	}
})		

二、属性中带’-‘的处理方式

属性命令的时候有时会用-来进行命名:url-href:

<div id="app">
	<coding url-href="https://coding.net/"></coding>
	<gitee url-href="https://gitee.com"></gitee>
</div>


var vm = new Vue({
	el:'#app',components:{
		'coding':{
			template:'<div>coding url is {{ url-href }} </div>',
			props:['url-href']
		},
		'gitee':{
			template:'<div>gitee url is {{ urlHref }} </div>',
			props:['urlHref']
		}
	}
})

在props里如果写成props:[‘url-href’]是错误的,必须用小驼峰式写法props:[‘urlHref’]。

三、在构造器里向组件中传值

把构造器中data的值传递给组件,使用v-bind绑定。

<div>
	<svn v-bind:url="svnurl"></svn>
</div>

var vm = new Vue({
	el:'#app',
	data:{
	svnurl:'https://svn.com/'
	},
	components:{
		'svn':{
			template:'<div>svn url is {{ url }} </div>',
			props:['url']
		},
	}
})

Component父子组件关系

一个自定义组件中要使用其他自定义组件,这种组件嵌套关系成为父子组件关系。

一、构造器外部写局部注册组件

将局部组件的编写放到了构造器内部,如果组件代码量很大,会影响构造器的可读性,造成拖拉和错误。
解决的方法是将组件编写的代码放到构造器外部或者放在单独文件中。

//html中引用
<div id="app">
	<github></github>
</div>

//先声明一个对象,对象里就是组件的内容。
var github = {
	template:"<div>github url is https://github.com</div>"
},  
var vm = new Vue({
	el:"#app",
//构造器里引用声明好的对象
	components:{
		"github":github
	}
})

二、父子组件的嵌套