vue 组件注册
var MyComponent = Vue.extend({});
此时得到一个组件构造器,但还无法直接使用,需要将组件注册到应用中。注册方式分为全局注册和局部注册
1 全局注册
需要注意全局注册在根实例初始化之前注册
方式如下:
Vue.component('my-component',MyConponent);
这条语句要在var vm= new Vue({ })
之前,注册成功之后就可以以<my-component>
的形式使用组件。
命名规范建议使用小写字母加“-”。
<div id="app">
<my-conponent></my-conponent>
</div>
var MyComponent = Vue.extend({
template:'<p>this is a component</p>'
})
Vue.component('my-component',MyComponent)
var vm = new Vue({
el:'#app'
})
结果如下:
<div id="app">
<p>this is a component</p>
</div>
2 局部注册
局部注册的组件只能在被注册的组件中使用,无法在其他组件中使用。
var child = Vue.extend({
template:'<p>this is child component</p>'
});
var Parent = Vue.extend({
template:'<div>\
<p>this is a parent component</p>\
<my-child></my-child>\
</div>',
components:{
'my-child':child
}
});
输出结果:
<div>
<p>this is a parent chmponent</p>
<p>this is child component</p>
</div>
3注册语法糖
vue提供了全局注册和局部注册的简化方法,可以在注册时定义组件构造器选项。
//全局注册
Vue.component('my-component',{
template:'<p>this is a parent chmponent</p>'
})
//局部注册
var parent = Vue.extend({
template:'<div>\
<p>this is a parent component</p>\
<my-child></my-child>\
</div>',
components:{
'my-child':{
template:'<p>this is child component</p>'
}
}
});
组件选项中的data赋值与构造器选项中的data赋值略有不同,在vue构造器中是对data直接赋值,而在组件中data需要通过return返回值,这是因为组件可能有多个实例,如果直接赋值,那么一个实例的值改变,所有实例的值都将改变。
组件props
props起到父子组件间桥梁的作用。通过props将父组件的数据传递给子组件,子组件需要显式声明props。
vue.component('child',{
props:['parent'],
template:'<p>{{parent}}is from parent</p>'
})
<child parent = 'this data '></child>
结果为:
<p>this data is from parent</p>
动态传递数据
通过v-bind的方式将父组件的data数据传递给子组件。
var MyComponent = Vue.extend({
props:['message'],
template:"<p>{{'from parent :'+message}}</p>"
})
Vue.component("my-component",MyComponent);
var vm = new Vue({
el:'app',
data:{
message:'default'
}
})
绑定操作为:
<div id="app">
<input type="text" v-model = 'message'>
<my-component v-bind:message='message'></my-component>
// <my-component :message='message'></my-component> 简写
</div>
这种动态传递传递的是字符串,需要借助动态props传递数值。
<my-num :num='num'></my-num>
Vue.component('my-num',{
props:['num'],
template:'<p>{{num +'is a'+typeof num}}</p>'
});
var vm = new Vue({
el:'#app',
data:{
num:1 //通过props传递data的值。
}
})
默认是单向绑定,即父组件的数值改变,子组件的值也改变,反之则不然。
v-bind可以使用几种修饰符来选择不同的绑定方式:
v-bind:msg.sync | 双向绑定 |
---|---|
v-bind:msg.once | 单次绑定 |
当props传递的是对象或数组时,子组件的改变将会影响到父组件,不论是何种绑定方式,因为vue是引用传递。
- 补个代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vscodeone.js"></script>
</head>
<body>
<div id="one">
<input type="checkbox" name="" id="jfjf" value="jfjf" v-model="checknames">
<label for="jfjf">jfjf</label>
<input type="checkbox" name="" id="jfjfzz" value="jfjfzz" v-model="checknames">
<label for="jfjfzz">jfjfzz</label>
<input type="checkbox" name="" id="jfjfxx" value="jfjfxx" v-model="checknames">
<label for="jfjfxx">jfjfxx</label>
<br>
<span>the checknaems is : {{checknames}}</span>
<!-- <span>{{name}}</span> -->
<component-one></component-one>
<component-one></component-one>
<onescomponent></onescomponent>
<onescomponent></onescomponent><onescomponent></onescomponent><onescomponent></onescomponent>
</div>
</body>
<script src="./vue.js"></script>
<script>
// 全局组件,使用Vue.component(name,{})格式,任意新的vue实例都可以使用,
Vue.component('component-one', {
data: function() {
return {
count: 0
}
},
template: '<button v-on:click= "count++">you checked {{count}} times.</button>'
})
// 组件要在使用它的实例前注册,有先后顺序。
var childcomponent = {
template : '<div>helll,这是一个id为one的div的子组件</div>'
}
new Vue({
el: "#one",
data: {
checknames: [],
name: 'heloo'
},
// 局部组件,使用components:{}格式,只有当前实例可以使用,即定义这个组件的实例。
components:
{
// 'onescomponent':childcomponent
onescomponent:{template: '<div>hello,这是一个id为one的div的子组件</div>'}
}
})
</script>
</html>