05vue开发-组件

组件化和模块的区别

• 组件： 就是为了拆分vue实例的代码量，以不同的组件，来划分不同的功能模块
• 组件和模块化的不同：

• 模块是从代码逻辑划分的，方便代码非常开发，保证每个功能模块职能单一
• 组件是从 UI 界面划分的，方便 UI 组件的重用

创建组件的方式

一、

1. Vue.extend 来创建全局的 Vue 组件

    var com1 = Vue.extend({
		template:'<h3>Vue.extend 创建的组件</h3>'
    })

2. Vue.component('组件名称',创建出来的组件模板对象)
   Vue.component('myCom1',com1)
3. HTML中使用：
   <my-com1></my-com1> //创建的时候名称如果用驼峰，使用的时候需要用 -
4. 简化版

    Vue.component('mycom1',Vue.extend({
        template:'<h3>Vue.extend 创建的组件</h3>'
    }))

二、

1. Vue.component('mycom2',{
   template:'

   Vue.component 之间创建的组件

   '
   })
2. HTML中使用：
   <my-com2></my-com2>

• 注意 ：不论是哪种方式创建出来的组件，组件的 template 属性指向的模板内容，必须有且只能有唯一的一个根元素

三、

html:

<div id="app">
	<mycom3></mycom3>
</div>
<template id="tmp1">
	<div>
		<h3>此种用法有高亮和提示</h3>
	</div>
</template>

js:

Vue.component('mycom3',{
	template:'#tmp1'
})
var vm = new Vue({
	el:'#app',
	data:{},
	methods:{}
})

使用 components 定义私有组件

```javascript var vm = new Vue({ el:'#app', data:{}, methods:{}, components:{ //定义实例内部私有组件 login:{ template:'

这是私有login组件

' } } }) ``` ## 组件中的 data 和 methods

Vue.compontent({
	template:'<h1>这是全局组件---{{ msg }}</h1>'
	data:function(){  //组件 data 需要是函数
		return {      //必须返回一个对象
			msg:'这是组件定义的data数据'
		}     
	},
	methods:{
	
	}
})

组件切换

1. v-if 和 v-else

<a href="" @click.prevent="flag=true">登录

<a href="" @click.prevent="flag=false">/a>

2. Vue 提供的 component

   <a href="" @click.prevent="flag='login'">登录

   <a href="" @click.prevent="flag='register'">/a>

   • // component 是一个占位符， :is 属性可以用来指定要展示的组件名称

组件过渡

//mode属性，设置切换方式，先出后进

​

父子组件传值

• 父组件，可以在引用子组件的时候，通过属性绑定 v-bind 的形式，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部

  <div id="app">
  	<com1 v-bind:parentmsg="msg"></com1>
  </div>
  

  var vm = Vue({
  	el:'#app',
  	data:{
  		msg:'需要传递的值'
  	},
  	components:{
  		data:{} //子组件中的 data 数据，是子组件自己私有的；数据可读可写
  		com1:{
  			template:'<h1>这是子组件</h1>'，
  			props:['parentmsg'],  //把父组件传递过来的 parentmsg 属性，在 props 数组中定义一下，才能使用 [组件中的所有 props 中的数据，都是通过父组件传递给子组件的]；数据只读的 
  		}
  	}
  })
  

父组件向子组件传递方法

• 使用事件绑定机制： v-on

<div id="app">
	<com1 @func:="show"></com1>
</div>

var com2 = {

​	template:'#tmp1',
	data(){
		return { }
	}

​	methods:{

​		myclick(){
			//第一个参数为父组件方法名，其它为子组件向父组件传的 数据
​			this.#emit('func',123,456)   //emit 代表触发、调用的意思

​		}	

​	}

}

var vm = Vue({

​	el:'app',

​	data:{},

​	methods:{

​		show(data,data2){

​			console.log('调用父组件身上的 show 方法');

​		}

​	}

})

使用 ref 获取 DOM 元素 和 组件 引用

1. DOM

<h1 ref='myh1'>11111</h1>

<h2 ref='myh2'>22222</h2>

console.log(this.$refs.myh1.innerText);

2. 组件

   `

   this.$refs.mylogin.msg   //vm 中获取组件的数据
   this.$refs.mylogin.show() //vm 中调用组件的方法