VUE 组件及通信

main.js

import Vue from 'vue' 
//第三方的模块 只能引入名字,就是package.json中依赖的插件,有import 就有export（抛出）
import App from './App.vue' // eschajian6的模块加载实现  一个js文件就是一个模块

new Vue({ # 全局只有一个Vue对象,./App.vue就是顶级组件
  el: '#app',
  render: h => h(App)
})

组件页面的结构

<template>HTML内容</template>
<script>JS部分</script>
<style>CSS部分</style>

HTML部分   

<template>
<--HTML部分只能是一个闭合标签-->
	<div class="vheader">
		<h3>哈哈哈</h3>
		<img :src="url">
		<ul>
			<li v-for = "(item,index) in hfavs">
				{{item}}
			</li>
		</ul>
		<button @click='addOneFav'>添加</button>
	</div>
</template>

JS部分

<script>
// 抛出的对象就相当于绑定本组件的Vue对象
  export default {
    name:"App",
    data:function(){ //data属性已函数形式返回对象
      return {
        msg:'今天学习组件',
        favs:['抽烟',"喝酒","烫头"]
      }
    }
  }
</script>

CSS部分

<style scoped>
/*css部分的样式是全局的,如果只想在组件内生效要使用scoped*/
h3{
	color: yellow;
}	
</style>

父子组件的调用及通信

父组件调用子组件

<--在父组件中-->
<template> 
<--将组件属性中的键作为标签放置在HTML内容中-->
    <Vheader></Vheader>
    <Vmarked></Vmarked>
</template> 

<script>
// 先要导入子组件
import Vheader from './Vheader'
import Vmarked from './Vmarked'
 export default {
    name:"App",
    data:function(){
      return {
        msg:'今天学习组件',
        favs:['抽烟',"喝酒","烫头"]
      }
    },
    // 将子组件挂载在父组件上
    components:{ //组件属性
      Vheader:Vheader,
      Vmarked  // 键和值相同的简写形式
    }
  }
</script>

父组件向子组件传递数据

组件之间的传值是自上至下的,值只需要传递给顶级组件,而不必为每个组件传值

<--为子组件的标签对象绑定自定义属性-->
<--父组件的HTML部分-->
<Vheader :hfavs = 'getAllDatas'></Vheader>

<--子组件接收数据需要验证-->
<--子组件的JS部分-->
<script>
	import url from './assets/logo.png'
	export default{
		name:'vheader',
		data(){
			return{
				url:url
			}
		},
		props:{ // 用来接收数据父组件传来数据的属性
			// 一定要验证 验证数据属性的类型
			hfavs:Array // 在HTML内容中就可以使用hfavs了
		}
	}
</script>

子组件向父组件传递数据

<--使用自定义事件,使用$emit()触发自定义的函数-->
<--父组件HTML,为子组件绑定自定义事件和处理函数-->
<Vheader @addHandler='add'></Vheader>

<--在子组件中,使一个事件触发的方法去触发自定义的时间-->
<template>
	<button @click='addOneFav'>添加</button>
</template>
<script>
	import url from './assets/logo.png'
	export default{
		name:'vheader',
		data(){
			return{
				url:url
			}
		},
		methods:{
			addOneFav(){
				// $emit 使用$emit()方法来触发自定义事件
				// 第一个参数 是自定义的函数名,后面的参数是传给自定义函数的参数
				this.$emit('addHandler',12323);
			}
		}
	}
</script>