Vue.component (组件名称,组件对象) 这一步叫做注册组件
全局注册组件后,就可以在整个应用中使用这个组件
注册全局组件
创建组件的方法:
- 第一种方式
全局注册一个组件Vue.component(组件名称,组件对象),全局注册后,就可以在整个应用中使用这个组件,使用方式是在body里面<my-component></my-component>
var myComponent = Vue.extend({
template : "<h1>第一个 Vue 组件</h1>"
});
Vue.component("my-component",myComponent);
- 第二种方式:直接写 ,简化,使用方式,也是在body里面写一个标签
<my-component2></my-component2>,
vue.component ("my-component2",{
template :"<h1>第二个 Vue 组件</h1>"
})
这种方式创建的是全局组件,接下来的方式是创建局部组件.配置子组件
局部组件注册
- 类似
methods配置项的方式,配置子组件
var vm = new Vue ({
el : "#box", //指定挂载元素
data : {
msg : "this is father's msg",
},
components : {//配置子组件
"my-component3" : {
template : "<h1>第三个 Vue 组件</h1>",
},
},
})
- 第四种方式:先声明一个模板对象,
var m4 = {
template: "<h1>第4个组件</h1>"
}
在Vue实例 的 组件配置里面 ,写一个键值对
var vm = new Vue ({
el : "#box", //指定挂载元素
data : {
},
components : {
"my-component4" : m4,// 把变量赋值给 组件4
}
})
以上就是第四种组件的声明方式
父向子传递值
注意:
1, vue的子集无法直接访问到父集的属性和变量,这是单项绑定,在Vue 中,组件的作用域,默认是隔离的,如果,子组件想访问到父集的数据,则需要父集显示的向下传递,如何显示的向下传递呢? 用props
props 可以是数组形式接收属性,也可以是对象形式,,对象类型的也可以自定义验证,用validator
<div id="box">
<my-component4 :msg="msg"
:a="age"
:b="price"
:i="isShow"></my-component4>父向子传值
<!--v-bind:msg 普通传递传递的是一个字符串,用v-bind:绑定一下 对应的将会是一个变量-->
</div>
</body>
<script src="vue2.0.js"></script>
<script>
var m4 = Vue.extend({
template : `
<div>
<h1>第四个 Vue 组件</h1>
<h1>{{ msg }}</h1>
<h1>{{ a }}-{{ i }}-{{ b }}</h1>
</div>
`,//在template后面补一个配置项
// props : ["msg","a","is"],//数组模式 //通过props达到父组件向子集传值的目的
props : {//对象模式
msg : null,
// msg : String,
// a : Number,
a : {
type : Number,
required : true,//必须传入
},
b : {
validator : function(val){
return val>10;
}
},
i : Boolean,
}
})
var vm = new Vue ({
el : "#box", //指定挂载元素
data : {
msg : "this is father's msg",
age : 7,
isShow : true,
price : 11,
},
components : {//配置子组件
"my-component4" : m4,// 把变量赋值给 组件4
}
})
</script>
子向父传递值
绑定事件,发送$emit 事件
<div id="box">
{{ num }}--{{ msg }}
<my-component @pfun="fun"></my-component>
</div>
</body>
<script src="vue2.0.js"></script>
<script>
var vm = new Vue({
el : "#box",
data : {
msg: "hell china!!!",
num : 0,
},
components : {
"my-component" : {
template : `
<div>
<h1> 组件</h1>
<button @click='cfun'>呼唤父</button>
</div>
`,
data : function(){
return {
num : 0,
}
},
methods : {
cfun : function(){
console.log("子准备呼喊");
this.$emit("pfun",1000);
}
},
computed : {},
},
"other-component" : {}
},
methods : {
fun : function(money){
console.log("收到来自子的呼唤",money);
this.num = money;
},
}
})
</script>
---------------------分割线-------------------------------
data数据声明和 $refs 和 ref
组件内部的data ,必须是一个function,并且function必须返回一个val
- 为了解决地址传递的问题,在组件中声明 data 必须为函数
- 在组件中声明data.必须是一个函数,堆栈图,data是一个地址,指向了一个仓库,
- 如果需要获取 DOM 元素,可将元素以
ref='name'进行标识
可以通过this.$refs.name得到对应 name 的 DOM元素, 少用,
<script>
var d = { num :0 };
var vm = new Vue({
el : "#box",
data : {
msg : "Hello Vue!!!",
num : 0,
},
components : {
"my-component" : {
template : `
<div>
<h1 @click="say">子组件</h1>
{{ num }}
<button @click="num=num+1">{{ num }}</button>
<input type='text' value='123' ref='mi'/>
</div>
`,
data : function(){
//引用类型 js数据类型,基础数据类型,引用数据类型,地址引用,不是值传递
//且返回一个新对象,这样每一个组件用到的 data 是一块新的内存地址 组件中互不影响.
return {
num : 0
}
},
// data : function(){
// return d;
// },
methods : {
say : function(){
//如果需要获取 DOM 元素,可将元素以 ref='name' 进行标识
//可以通过 this.$refs.name 得到对应 name 的 DOM 少用,
this.$refs.mi.focus();
console.log("hello china",this.num)
}
}
},
},
methods : {},
computed : {},
})
</script>
componnet 可以作为一个vue使用,他是一个完整的组件,可以有data,也可以有methods.computed,
全局vue 中,也可以有这些.
在使用组件的时候,
$emit () this.$emit()触发什么事件,在jquery中,用trigger 去触发自定义事件,
在Vue中,用 $emit() 去触发自定义事件,
动态组件
组件可以根据动态组件的切换渲染页面
在body里面写一个标签 <componnet></component>
给标签绑定一个属性,<componnet :is=""></component> 这个属性是固定的,就是 :is 这就是绑定动态属性
绑定一个 currentView <componnet :is="currentView"></component> 然后可以通过切换,@click="currentView=''home""或者""cart""或者"mine切换页面"
angular 用ui-view ,vue用 currentView
is所绑定的值,必须在component 被注册
插槽
slot
mine 想套小组件的时候,要使用插槽,使用方法
插槽其实也叫内容分发,
具名插槽,含有 name 属性的 slot 标签,
在组件渲染模板时,会抛弃标签内的原始内容,为了保留原始内容,
可以在模板内通过slot 标签预留插槽位
原始内容,(不含 slot 属性的) 会默认放到匿名插槽内
含有 slot 属性的,会去查找对应的插槽,未找到,将抛弃内容,
<div id="box">
<my-main>
<!--组件在渲染的时候会丢掉所有的原始内容-->
<my-header slot="h"></my-header>
<p>这是原始的p 无指定插槽 匿名插槽 具名插槽
</p>
<my-footer slot="f"></my-footer>
</my-main>
</div>
</body>
<script src="vue2.0.js"></script>
<script>
//动态组件
var vm = new Vue({
el : "#box",
data : {
},
components : {
"my-header" : {
template : `<h1>this is header</h1>`,
},
"my-footer" : {
template : `<h1>这是footer</h1>`,
},
"my-main" : {
template : `
<div>
<slot name = 'h'></slot>
<h1>this is main</h1>
<slot></slot>
<slot name = 'f'></slot>
</div>
`,
},
},
methods : {},
computed : {},
})
</script>
组件渲染的时候会丢弃组件内部的原始内容,
