vue组件

vue组件

一.组件分类

组件分为全局组件和局部组件两种

全局组件 component

局部组件 components

1.全局组件

方法1使用

 Vue.component('组件名',{
	template:`<div>模板</div>`,
	data(){
		return:{
			name:"张三'
		}
	},
})

方法2

模板可以使用

<template id='xx'></template>

使用

Vue.component('组件名',{
	template:'#xx',
	data(){
		return:{
			name:"张三'
		}
	},
})

方法3

var xx = `<div></div>`
使用 Vue.component('组件名',{
	template:xx,
	data(){
		return:{
			name:"张三'
		}
	},
})

方法4

使用   <组件名></组件名>

2.局部组件

使用

Vue.component('组件名',{
	template:`<div>模板</div>`,
	data(){
		return:{
			name:"张三'
		}
	},
	methods:{
	},
	components:{
		'aChild':{
			template:`<div>子组件只能在父组件的根节点内使用</div>`,
		data(){
			return:{
				sex:"男'
		}
		}
		}
	}

})

二.组件通信

1.子传父

原理

通过事件向上传递

用法

在子组件标签上使用@自定义事件名=‘父组件里面的方法名’

例如
<zi @myevent=‘getChild’>
子组件内容通过事件触发
使用 this.$emit('自定义事件名','值')传递数据

示例

<div id="box">
        <zi @myevent='getchild'></zi>
    </div>

    <script>
        Vue.component('zi',{
            template:`
                <div>
                    子组件
                    <button @click='setf'>点我</button>
                </div>
            `,
            data(){
                return{
                    ziname:'子组件内容'
                }
            },
            methods:{
                setf(){
                    console.log(1)
                    this.$emit('myevent',this.ziname)
                }
            }

        })

        new Vue({
            el:'#box',
            data:{
                heihei:"父组件内容"
            },
            methods:{
                getchild:function(e){
                    console.log(e)
                }
            }
        })

2.父传子

原理

通过属性向下传递

用法

这是子组件
自定义了一个属性 myshow
子组件内部使用 props:{ myshow:Boolean} 可以约束类型
内容可以直接{{myshow}}使用父元素传递过来的值

特点

通过属性向下传
xxoo是子组件 abc自定义的属性 age是父组件里面的属性
//子组件 使用 props这个属性去接收 props:['abc','bb'] props:{'abc':String}
//父传子使用属性向下传 如果你的属性值是变量或者是数组使用 :属性 这种动态绑定,不加:会变成字符串

示例

        var aa1=`
        <div>
          <h1>我是aa组件
            <bb :oo='[1,2,3]'></bb>
            <bb oo='name' @kkk="uuu"></bb>
            </h1>
      </div>
        `
        var bb1=`
        <div>
          <h1>我是bb组件{{oo}}</h1>
          <div v-for='i in oo'>{{i}}</div>
          <button @click='abc'>向上传</button>
      </div>
        `
       Vue.component('aa',{
            template:aa1,
            data(){
                return {
                    name:'老王'
                }
            },
            methods:{
                uuu(a){
                    console.log(a)
                }
            }
       })
       Vue.component('bb',{
            template:bb1,
            props:['oo'],
            methods:{
                abc(){
                    this.$emit('kkk',this.age)
                }
            },
            data(){
                return {
                    age:18
                }
            }
       })
       
        var VM = new Vue({
            el:"#box",

        })

3.ref

用法

<input type="text" ref='in1'> 
      <!-- 1直接放在标签中获取元素节点 -->
 <navbar ref='nchild'></navbar>
      <!-- 2放在组件中获取组件对象 -->

示例

    <div id="box">
      <input type="text" ref='in1'> 
      <!-- 1直接放在标签中获取元素节点 -->

      <navbar ref='nchild'></navbar>
      <!-- 2放在组件中获取组件对象 -->
      
      <button @click='getref'>获取ref数据</button>
    </div>
    <script>
        Vue.component('navbar',{
            template:`
                <div>
                    我是子组件
                </div>
            `,
            data(){
                return{
                    myname:'子组件状态'
                }
            }
        })
       VM= new Vue({
            el:'#box',
            data:{

            },
            methods:{
                getref(){
                    // console.log(this.$refs.in1.value)
                    console.log(this.$refs.nchild.myname)
                }
            }
        })
        
        
    </script>

三.动态组件

1.用法

<component :is="na"></component>

is的值是组件名

2.keep-alive

<keep-alive>
        <component :is="na"></component>
 </keep-alive>

keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现

示例

	<div id="box">
        <keep-alive>
        <component :is="na"></component>
        </keep-alive>
        <footer>
            <ul>
                <li @click="na = 'home'">首页</li>
                <li @click="na = 'list'">列表页</li>
                <li @click="na = 'goods'">商品也</li>
            </ul>
        </footer>
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                na:'home'
            },
            components:{
                home:{
                    template:`
                        <div>home首页<input type='text'/></div>
                    `
                },
                list:{
                    template:`
                        <div>list列表</div>
                    `
                },
                goods:{
                    template:`
                        <div>goods商品</div>
                    `
                },
            }
        })
    </script>