vue组件的了解

vue组件

什么是组件 : 为了拆分vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块

组件化和模块化

• 组件化:从UI界面的角度划分 ,方便UI组件的重用
• 模块化 : 从代码逻辑的角度进行划分的,方便代码分层开发,保证每个模块的智能单一

定义全局的vue组件

Vue.component(‘组件名称’,创建处理的组件模板对象)

第一个参数: 引用组件的时候,使用标签形式来引用

第二个参数 : 组件template属性的模板内容只能有一个根元素,

• 方式一

<div id='app'>
    <child></child>
    <!--组件名称为驼峰的 , 要转为小写,用-连接-->
    <my-coml></my-coml>
</div>

Vue.component('child',{
    template:`<h3>子组件</h3><span>2222</span>`  //错,有两个根元素了
})
//组件名称 使用了驼峰
Vue.component('myComl',{
    template:`<div><h3>子组件</h3><span>2222</span></div>`  //只有一个div根元素
})

• 方式二

<div id='#app'>
    <mycoml></mycoml>
</div>

<!--在被控制的#app外面,  使用 template 元素,定义组件的html模板结构-->
<template id='tmpl'>
	<div>
        <h1>我是外部定义的组件结构</h1>
        <h4>哎呦,很不错哟</h4>
    </div>
</template>

Vue.component('mycoml',{
    template:'#tmpl'
})

• 方式三

<div id='#app'>
    <mycoml></mycoml>
</div>

<!--在被控制的#app外面,  使用 template 元素,定义组件的html模板结构-->
<template id='tmpl'>
	<div>
        <h1>我是外部定义的组件结构</h1>
        <h4>哎呦,很不错哟</h4>
    </div>
</template>

//定义一个字面量的 组件模板对象
var mycoml ={
    template:'#templ'
}

Vue.component('mycoml',mycoml)

定义私有组件

• 方式一

<div id='#app'> 
    <login></login>
</div>

new Vue({
	el:'#app',
    components:{
        //定义私有组件login,只能在#app里使用
        login:{
            template:`<div><h3>子组件</h3><span>2222</span></div>`
        }
    }
})

• 方式二

<div id='#app'> 
    <login></login>
</div>
<template id='tmp'>
	<div>
        <h3>子组件</h3>
        <span>2222</span>
    </div>
</template>

new Vue({
	el:'#app',
    components:{
        //定义私有组件login,只能在#app里使用
        login:{
            template:'#tmp'
        }
    }
})

• 方式三

new Vue({
	el:'#app',
    components:{
        //相当于 mycoml:mycoml
        mycoml
    }
})

组件里的属性

data

注意点

• 组件可以有自己的data数据
• 组件的data 和 实例的data不一样, 实例的data是个对象,组件的data是个function
• 组件中的data方法,内部必须返回一个对象
• data数据,和实例的data使用方式一致

Vue.component('mycom',{
    template:'<h1>这是全局组件  {{msg}} </h1>',
    //子组件里的data数据,都是子组件自身私有的
    data:function(){
        return {
            msg :'这是组件中的data数据'
        }
    }
})

组件切换

• 方式一 : 使用 v-if v-else

  <div id='#app'>
      <a href='' @click.prevent='flag=true' v-if='flag'></a>
       <a href='' @click.prevent='flag=false' v-else='flag'></a>
  </div>
  
  //js中
  data:{
  	flag:true
  }
  

• 方式二 : component

  vue 提供了component ,来展示对应名称的组件

  <component :is=" 'login' "></component>

  component 是一个占位符

  :is 属性,用来指定要展示的组件名称

<div id='#app'>
   <a href='' @click.prevent='comName="login"'></a>
    <a href='' @click.prevent='comName="register"'></a>
   <component :is='comName'></component>
</div>
//js
data:{
   comName:''
}

Vue.component('login',{
    template:'<h1>这是登录组件</h1>'
})
Vue.component('login',{
    template:'<h1>这是注册组件</h1>'
})

组件通讯

• 组件是一个独立,封闭的个体 , 也就是说,组件中的数据默认情况下,只能在组件内部使用,无法在外部使用
• 对于组件之间需要相互使用情况,使用 组件通讯机制来解决
• 组件通讯的三种情况
  • 父组件将数据传递给子组件
  • 子组件将数据传递个父组件
  • 非父子组件(兄弟组件)

父组件传递数据给子组件

子组件中,默认无法访问到父组件中的data上的数据和methods里的方法

解决原理 : 父组件通过 绑定属性把 数据传递给子组件

<div id='#app'>  
    <!--1. 使用属性绑定  将数据传递给子组件-->
    <coml :msg='msg'></coml>
</div>

new Vue({
    el:'#app',
    data:{
        msg:'----父组件的数据'
    },
    components:{
        coml:{
            template:'<h1>这是子组件-----{{msg}}</h1>',
            //2.msg必须要先在props里定义一下,才能使用
            //组件中props中的数据,都是通过父组件传递给子组件的(都是外部传入的)
            props:['msg']
        }
    }
})

data和 props的区别

1. data :都是子组件自身私有的数据;props : 都是从父组件里传递给子组件的
2. data : 数据都是可读可写的 ; props : 数据都是只读,无法重新赋值

子组件传递数据给父组件

原理 : 父组件通过绑定事件把方法 传递给子组件,子组件在调用方法的时候,把数据顺带着传递进去

• 把父组件的方法,通过事件绑定形式 绑定到子组件上 @func='show'
• 给子组件身上绑定一个自己的事件@click='myclick'
• 点击 子组件的事件 让它去调用 父组件传递的方法,并将子组件的数据传参进去 this.$emit('func',data)

<div id='#app'>
    <!--把方法的引用存到 func 属性上-->
    <com @func='show'></com>
</div>
<template id='tmpl'>
	<div>
        <h1>这是子组件</h1>
        <input type='button' value='点击触发父组件传递的func方法' @click='myclick'/>
    </div>
</template>

var com = {
    template:'#tmpl',
    methods:{
        myclick(){
            //当点击子组件的按钮时,要拿到父组件传递的func方法,并调用该方法
            //this 代表当前组件
            //emit 代表 触发 调用(调用父组件的方法)
            this.$emit('func' , 123)
		}
    }
}
new Vue({
    el:'#app',
    methods:{
        show(data){
            console.log('父组件的方法'+data)
        }
    }
})