VueDay05(组件传值、组件属性、插槽)

组件

一切皆组件、在页面中，不同区域用的是相同的HTML结构或者说是相同的模板，而在页面显示的是不同的数据，而这个就是组件，Vue中的组件化开发就是把页面分为不同的模板（组件），不同模板可以有不同的人开发，在打包车成一个大的组件挂载到页面上，提高开发效率.组件分为全局组件与局部组件（查看上期笔记）
注意:一般一个Vue文件就是一个组件Vue框架集成加载器可以解析vue文件并打包,并且每一个组件只能有一个跟节点;

组件引入方式

 es6导入语法 （import）
方式一：import sinna from '@/sinna.vue'（@表示src目录）
方式二：import sinna from './sinna.vue'(相对路径)
import axios from 'axios';导入axios库(预先安装)直接在node_modules中导入
注意：引入之后需要注册再能在template中使用即：
在组件实例化VM的components中注册组件

<script>
//es6语法简写
components: {
    sinna
  }
//不简写
components: {
    'sinna':{template='...'}
}
</script>

组件传值

从父组件传值给子组件,首先父组件需要引入再注册子组件再通过自定义属性传值 子组件用props接受数据;

<script>
//实例父组件
    import sinna from '@/sinna.vue' //导入
    //自定义属性 :属性名='data'动态数据.属性绑定后可以用data中的值也可以不绑定直接传值
    <sinna :title="sinarr"></sinna> 
     data(){
      return {sinarr:[]}//可在挂载之后请求服务器更新数组传给子组件  
     }
     components: {
        sinna
      },//注册
      
 //子组件
      实例化VM中 
      //（常用）属性名需要与父组件的一致;
     方式一： props:['title']
      //可以限制传值类型
     方式二：props:{
			title:String,
			title2:[String,Number],
			title3:{
				type:String,
				default:"默认属性的值"
			},
			title4:{
				validator:(v)=>{
					return isNaN(v)?false:v%2==0
				}
			}
		}
</script>

插槽

在组件中的节点如果想通过父组件添加可以用到插槽
语法:父组件 v-slot:s1(语法糖:#s1)  s1为子组件的name名; 
     如<template #s1></template>里面可以写一些标签 必须用template 如果没有template里面
     没有标签可以默认显示子组件的slot里面的
     子组件 用<slot name="父组件定义的一致"></slot>定义插槽在子组件的位置

示例

//父组件
<template>
	<div id="app">
		<h1>666</h1>

		<Box title="hello">
			<template>
				<a href="#">2222</a>
			</template>
			<template #s1>
				<h1>插槽</h1>
			</template>
			<template v-slot:s2>
				<a href="#">666</a>
			</template>
		</Box>

	</div>
</template>
<script>
	import Box from "./Box.vue"
	export default {
         components:{
			 Box
		 }

	}
</script>
//子组件
<template>
	<div class="box">
		<p>组件的头部</p>
		<slot name="s1"></slot>
        <slot name="s2"></slot>
        <p>组件的尾部</p>
	</div>
</template>

<script>
	export default {
		
	}
</script>

Vue中css作用域的理解

设置vue文件style标签添加属性：scope 在vue文件打包时会给组件每一个标签设置一个独一无二的属性(hash数字)，然后为css代码添加属性选择器，以实现css局部作用域的目的,这样就可以实现每个组件写的样式不会作用的其他;