1.Vue中是如何引入组件（对象 构造函数 ）
1.1. Vue是vue实例的构造函数， 通过new Vue() 就可以得到vue实例
1.2. new Vue.extend这个方法得到的是 new Vue的一个子类
1.3. 平时我们不适用new 来实例化Vue.extend() , 将其当做标签来用
1.4. 组件在使用的时候，我们需要注册 一下 ，
1.5. 注册提供了两种方式：全局注册， 局部注册 分别对应的是：全局组件 局部组件
1.6. 组件也是一个实例 ，实例也是一个组件
var vm = new Vue()
var Component = Vue.extend() ;
console.log( vm )
console.log( new Component)
// console.log( Vue ) // vue实例的构造函数
// console.log( Vue.extend() ) //组件的构造函数
2.全局注册组件
<body>
<div id="app">
<hello></hello>
<hello></hello>
</div>
</body>
<script>
// 注册的第一种方式： 全局注册
var Hello = Vue.extend({
template:'<h3>这里是组件的模板</h3>'
})
// 全局注册
Vue.component('hello',Hello)
// 使用 注册的组件必须挂载在一个实例上，才能使用
new Vue({
el:"#app",
})
/* 技巧：
1. 模板
2. 组件名称
3. 组件必须使用在实例中 */
</script>
3.局部注册组件
<body>
<div id="app">
<myYyb></myYyb>
</div>
</body>
<script src="./base/vue.js"></script>
<script>
/* 局部注册组件是将组件放在实例的配置项中 ，通过components属性引用，使用范围仅限当前实例 */
// 1. 先来个组件的配置项（模板 数据 。。。）
var Hello = Vue.extend({
template:'<h1>这里是局部注册</h1>'
})
//2. 注册组件（局部注册）
new Vue({
el:'#app',
components:{//局部组件
"my-yyb":Hello //组件的名称:组件的配置项
}
})
// 3. 将组件名称当做标签写在当前实例中
</script>
4.其他创建方式
<body>
<div id="app">
<hello></hello>
<item></item>
</div>
</body>
<script src="./base/vue.js"></script>
<script>
// 注册的第二种方式 Vue.extend()
// 全局组件
Vue.component('hello',{
template:'<h3>这是全局组件的配置使用方式</h3>'
})
new Vue({
el:'#app',
// 局部组件
components:{
'item':{
template:'<h4>这里是局部组件配置的使用</h4>'
}
}
})
</script>
5.is属性的用法
<body>
<div id="app">
<table>
<tr is = 'hello'>
</tr>
</table>
</div>
</body>
<script src="./base/vue.js"></script>
<script>
/*
像 table ul select ...这类型里面的子级是死的 ，这类型我们直接使用组件时，无法正确解析，
解决办法： 给他添加一个is属性
*/
//使用规则
Vue.component('hello',{
template:'<tr><td>这里是组件使用规则</td></tr>'
})
new Vue({
el:'#app',
})
</script>
6.template模板
6.1 当我们的模板内容较多，较复杂时，这个配置项就有点复杂了---》
解决办法：使用template模板（html结构中）
6.2当然项目中我们不这样子使用，我们将来使用的是一种叫做jsx语法 单文件组件
6.3template模板下直接元素只有一个
<body>
<div id="app">
<hello></hello>
</div>
<template id="hello">
<div>
<p>这里是template模板</p>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
Vue.component('hello',{
// 1. 当我们的模板内容较多，较复杂时，这个配置项就有点复杂了---》解决办法：使用template模板（html结构中）
// 2.当然项目中我们不这样子使用，我们将来使用的是一种叫做jsx语法 单文件组件
// 3. template模板下直接子元素只有一个
template:'#hello'
})
new Vue({
el:'#app'
})
</script>
7.绑定is 属性
<body>
<div id="app">
<!-- <button @click = ' isShow = !isShow '>
toggle
</button>
<aaa v-if = 'isShow'></aaa>
<bbb v-else></bbb> -->
<button
@click = ' component = (component == "bbb"?"aaa":"bbb") '
>
toggle
</button>
<component :is='component'></component>
</div>
</body>
<script src="./base/vue.js"></script>
<script>
// 绑定is 属性
Vue.component('aaa',{
template:'<h3>这里是aaa组件</h3>'
})
Vue.component('bbb',{
template:'<h3>这里是bbb组件</h3>'
})
new Vue({
el:'#app',
data:{
isShow:true,
component:'bbb'
}
})
</script>
8.组件的嵌套
/* 1. 在vue中，项目都有一个跟实例，这个根实例中有大量的组件，组件之间都可以发生嵌套，
2. 在vue中，组件嵌套只能形成父子关系
3. 对于全局组件来说，父子关系只是存在于嵌套的时候 */
<body>
<div id="app">
<father></father>
</div>
<script src="base/vue.js"></script>
<script>
Vue.component("father",{
template:"<h1>这里是father组件 <son></son></h1>"
})
Vue.component("son",{
template:"<h4>这里是son组件 <grandson></grandson></h4>",
components:{//components
"grandson":{
template:"<h6>这里是grandson组件</h6>"
}
}
})
new Vue({
el:"#app"
})
</script>
</body>
9.******（重点）组件之间的数据传递
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<p>
这里是父组件
</p>
<input type="text" v-model = 'fatherData'>
<p>
{{fatherData}}
</p>
<hr>
<son :aa = 'fatherData'></son><!-- 2.将这个数据通过一个自定义属性绑定在子组件标签上 -->
</div>
</template>
<template id="son">
<div>
<p>
这里是子组件
</p>
<p>
这里是父传递给子级的数据：{{aa}}<!--4. 在子组件模板中就可以将这个属性当做data来直接使用 {{自定义属性}} -->
</p>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
/* *****************s级重点 ： 父组件传递数据给子组件 ？ */
Vue.component('father',{
template:'#father',
data(){//1.在父组件中定义一个数据 ，（这个数据是使用的data函数的返回值）
return {
fatherData:'father'
}
}
})
Vue.component('son',{
template:'#son',
props:['aa']//3.在子组件的配置项目中使用props:['自定义属性'] 来接受来自父组件的数据
})
new Vue({
el:'#app',
data:{
msg:'yyb'
}
})
</script>
10.*******sss使用的局部注册 来实现 父组件传递数据给子组件
<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<input type="text" v-model="soncolor">
<hr />
<son :color="soncolor"></son>
</div>
</template>
<template id="son">
<div>
<input type="text" v-model="owncolor">
<div :style="{background:owncolor}" class="box"></div>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
// ******** s 使用的局部注册 来实现 父组件传递数据给子组件
//父组件可以通过v-bind来为子组件传递数据，当父组件的数据改变的时候，子组件接收到的数据也会改变
//父组件重新设置data数据的时候，会重新执行render函数，会重新给子组件传入最新的数据
new Vue({
el: "#app",
components: {
'father': {
template: "#father",
data: function () { 0
return {
soncolor: 'red'
}
},
components: {
'son': {
props: ['color'],
template: "#son",
computed: {
owncolor: function () {
return 'sky' + this.color
}
}
}
}
}
}
})
</script>
11.数据共享
<body>
<div id="app">
<aaa></aaa>
</div>
<template id="aaa">
<div>
<p>
aaa组件
</p>
<input type="text" v-model="msg.val">
<p>
{{msg.val}}
</p>
<bbb :msg="msg"><!-- 将msg绑定给bbb -->
<!-- 这里给的是对象 思路堆和栈原理。给bbb对象。相当于给了他地址-->
</bbb>
</div>
</template>
<template id="bbb">
<div>
<p>bbb组件 </p>
<input type="text" v-model="msg.val">
<p>
{{msg.val}}
</p>
</div>
</template>
<script src="base/vue.js"></script>
<script>
Vue.component("aaa",{
template:"#aaa",
data(){
return{//将msg的值更改为一个对象
msg:{val:"zsq"}
}
}
})
Vue.component("bbb",{
template:"#bbb",
props:["msg"]//获取msg
})
new Vue({
el:"#app"
})
</script>
</body>
12.数据共享---数据类型验证（props验证/validator）
<body>
<div id="app">
<aaa></aaa>
</div>
<template id="aaa">
<div>
<p>
aaa组件
</p>
<input type="text" v-model="num">
<p>
{{num}}
</p>
<hr>
<bbb :num="num" :n="n">
</bbb>
</div>
</template>
<template id="bbb">
<div>
<p>bbb组件 </p>
<input type="text" v-model="num">
<p>
{{n}}
</p>
</div>
</template>
<script src="base/vue.js"></script>
<script>
Vue.component("aaa",{
template:"#aaa",
data(){
return{
"num":233,
"n":10
}
}
})
Vue.component("bbb",{
template:"#bbb",
//这里是数据验证
props:{
"num":Number,//常规检测数据类型
"n":{
validator(val){//对数据进行条件验证检测。出现错误会在控制台报告
//validator函数的使用是为了解决我们除了数据类型检测之外的其他要求
return val>6;
}
}
}
})
new Vue({
el:"#app"
})
</script>
</body>
13.组件之间的通信
<body>
<div id="app">
<aaa></aaa>
</div>
<template id="aaa">
<div>
<p>这 里是aaa组件</p>
<p>
{{msg}}
</p>
<hr>
<bbb :fn = 'fn'></bbb>
</div>
</template>
<template id="bbb">
<div>
<button @click = 'fn("word")'>
say
</button>
<p>这里是bbb组件</p>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
// 将父组件中的方法传递给子组件，子组件中可以通过事件来触发这个属性，如果这个函数中参数和父组件中的数据联系起来，那么我们就可以实现一个 通过子组件事件来更改父组件数据的方式
// 父组件传递数据给子组件考的是 属性绑定
// 子组件传递数据给父组件靠的是 事件（方式）
Vue.component('aaa',{
template:'#aaa',
data(){
return {
msg:'yyb'
}
},
methods:{
fn(val){
this.msg = val ;
}
}
})
Vue.component('bbb',{
template:'#bbb',
props:['fn'],
methods:{
oFn(){
console.log( this.$parent )
}
}
})
new Vue({
el:'#app'
})
</script>
14.组件之间的通信
<body>
<div id="app">
<aaa></aaa>
</div>
<template id="aaa">
<div>
<p>这是aaa组件</p>
<input type="text" v-model='msg'>
<p>
{{msg}}
</p>
<hr>
<bbb :msg = 'msg' ></bbb>
<ccc :msg = 'msg' ></ccc>
</div>
</template>
<template id="bbb">
<div>
<p>
这是bbb组件
</p>
<input type="text" v-model='bbbData'>
<p>
{{bbbData}}
</p>
<p>
这里是bbbmsg: {{bbbmsg}}
</p>
</div>
</template>
<template id="ccc">
<div>
<p>
这是ccc组件
</p>
<input type="text" v-model='cccData'>
<p>
{{cccData}}
</p>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
Vue.component('aaa',{
template:'#aaa',
data(){
return {
msg:'bingge'
}
}
})
Vue.component('bbb',{
template:'#bbb',
props:['msg','get'],
data(){
return {
bbbmsg:'bingge'
}
},
computed:{
bbbData:{
get(){
return this.msg ;
},
set( val ){
//
console.log(this.$parent)
}
}
}
})
Vue.component('ccc',{
template:'#ccc',
props:['msg'],
data(){
return {
cccmsg:'bingge'
}
},
computed:{
cccData:{
get(){
return this.msg ;
},
set( val ){
//需求：修改bbb组件的值？
// d级小重点 ： 寻找父级的方式来进行组件之间的通信： 这类型方法对导致，我们书写的混乱一级不易维护
this.$parent.$children[0].bbbmsg = 'aaa' ;
}
}
}
})
new Vue({
el:'#app'
})
</script>
15.子组件通过方法传递数据给父组件
<body>
<div id="app">
<father ></father>
</div>
<template id="father">
<div>
<p>
这里是father组件
</p>
<p>
{{fatherData}}
</p>
<hr>
<son @toson = 'get'></son>
</div>
</template>
<template id="son">
<div>
<p>
这里是son组件
</p>
<button @click = '_get'>
发送
</button>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
// s级重点：子组件通过方法来传递数据
Vue.component('father',{
template:'#father',
data(){
return {
fatherData:'father'
}
},
methods:{
get(val){//val就是son 组件传递过来的数据
this.fatherData = val ;
}
}
})
Vue.component('son',{
template:'#son',
props:['toson'],
data(){
return {
sonData:'son'
}
},
methods:{
_get(){
this.$emit('toson',this.sonData)
}
}
})
new Vue({
el:'#app'
})
</script>
16.组件通信-ref
<body>
<div id="app">
<button @click = ' get'>
get
</button>
<input type="text" v-model = ' msg '>
<aaa ref = 'aaa'></aaa>
<bbb ref = 'bbb'></bbb>
</div>
<template id="aaa">
<div>
<p>
这里是aaa组件
</p>
<hr>
</div>
</template>
<template id="bbb">
<div>
<p>
这里是bbb组件
</p>
<p>
{{msg}}
</p>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
/*
1. 组件间不仅可以用过$root/$parent/$children来获取对应关系的组件，
2. 父组件还可以主动的通过ref为子组件做标记也会形成ref链，也可以交互，注意多个子组件标记的是同一个组件，获取到的应该是一个数组
3. 如果是非父子组件也是可以进行通信的
*/
Vue.component('aaa',{
template:'#aaa',
methods:{
get(){
this.$refs.son.msg = 'yyb'
}
}
})
Vue.component('bbb',{
template:'#bbb',
data(){
return {
msg:'bbb'
}
}
})
new Vue({
el:'#app',
data:{
msg:'兵哥'
},
methods:{
get(){
//ref
this.$refs.bbb.msg = this.msg
}
}
})
</script>
17.组件通信-slot
<body>
<div id="app">
<item>
<header>
这里是头部
</header>
<h6>
这里是item组件中的标签
</h6>
<footer>
这里是底部
</footer>
</item>
</div>
<template id="item">
<div>
<slot></slot>
<h3>
这里是item组件
</h3>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
//在组件标签内部写入的内容默认的会被替换掉，如果想要在组件的模板里使用这些内容，就在对应的位置写上slot标签，这个slot标签就代表着这些内容
/*
slot 称之为分发
*/
Vue.component('item',{
template:'#item'
})
new Vue({
el:'#app'
})
</script>
18.组件通信-slot-name
<body>
<div id="app">
<aaa>
<nav slot = 'header'>
这里是导航
</nav>
<footer slot='footer'>
这里是底部
</footer>
</aaa>
</div>
<template id="aaa">
<div>
<slot name='header'></slot>
<h3>这里是aaa组件</h3>
<slot name='footer'></slot>
</div>
</template>
</body>
<script src="./base/vue.js"></script>
<script>
//在slot内容上通过slot属性标记后，在子组件中使用slot的时候可以用name属性去指定
Vue.component('aaa',{
template:'#aaa'
})
new Vue({
el:'#app',
})
</script>
网友评论