props与slot

props的详解：

看一下官方文档：

也就是props是子组件访问父组件数据的唯一接口。

详细一点解释就是：

一个组件可以直接在模板里面渲染data里面的数据（双大括号）。

子组件不能直接在模板里面渲染父元素的数据。

如果子组件想要引用父元素的数据，那么就在prop里面声明一个变量（比如a），这个变量就可以引用父元素的数据。然后在模板里渲染这个变量（前面的a），这时候渲染出来的就是父元素里面的数据。

全局组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>

</head>
<body>
	<div id="box">  
		<my-component msg="书影音"></my-component>
	</div>

<script>
	Vue.component("myComponent",{	
		/*props是用来接收参数的 例如父组件向子组件传参 可以放在props中*/
		props:['msg'],
		template:"<p>{{msg}}</p>" 		
	});

	var vm=new Vue({
		el:"#box",		
	})

</script>
</body>
</html>

改良版全局组件

请注意：父组件<my-component msg="书影音" imgurl="http://dpic.tiankong.com/39/bx/QJ6297705096.jpg"></my-component>
里的元素绝不能有大写，否则就会报错

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>

</head>
<body>
	<div id="box">  
		<my-component msg="书影音" imgurl="http://dpic.tiankong.com/39/bx/QJ6297705096.jpg"></my-component>
	</div>
	<template id="tt2">
		<div>
		<h1>{{msg}}</h1>
		<img v-bind:src='imgurl'>
	</div>
	</template>

<script>
	Vue.component("myComponent",{	
		/*props是用来接收参数的 例如父组件向子组件传参 可以放在props中*/
		props:['msg','imgurl'],
		template:"#tt2" 		
	});

	var vm=new Vue({
		el:"#box",		
	})

</script>

</body>
</html>

改良版局部组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
	<div id="box">
	<my-component msg="刘亦菲" imgurl="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537693691961&di=c1145cda27492a46d2d60c944e8c0e61&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201409%2F03%2F20140903113056_hyd4V.thumb.700_0.jpeg"></my-component>	
	</div>
	<template id="tt3">
		<div>
			<h1>{{msg}}</h1>
			<img v-bind:src="imgurl">
		</div>
	</template>

	<script>
		var vm=new Vue({
			el:"#box",
             data:{},
			components:{
				"myComponent":{									
					props:['msg','imgurl'],
					template:"#tt3"										
				}
			}

		})
	</script>
</body>
</html>

slot的详解

1.slot具名槽口:

给＜slot> 元素指定一个name 后可以分发多个内容，具名Slot 可以与单个slot 共存。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
	<div id="box">
		<my-comput>
			<div slot="Cpu">Intel core i</div>
			<div slot="GPU">GTX980 Ti</div>
			<div slot="Memory">king stom 32G</div>
		</my-comput>
	</div>
	<template id="tt">
		<div>
			<slot name="Cpu">1</slot>	
			<slot name="GPU">2</slot>
			<slot name="Memory">3</slot>
		</div>
	</template>
	<script>
		let vm = new Vue({
			el:'#box',
			data:{
				msg:"jin",
			},
			components:{
					"myComput":{
						template:"#tt",
					}
				}
		})
	</script>
</body>
</html>

2.slot匿名槽口:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
	<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
	<div id="box">
		<my-com>这是初始的内容</my-com>
	</div>
	<template id="tt">
		<div>
			<p>在内容之前的数据</p>
			
			<slot>如果初始的内容为空就显示这部分</slot>
 
			<P>在内容之后的</P>
		</div>
	</template>
	<script>
		let vm = new Vue({
			el:'#box',
			components:{
				"myCom":{
					template:"#tt",
 
				}
			}
		})
	</script>
</body>
</html>

父子组件开发之函数关联方法

这个函数的方法是绑定父组件的函数，当我们在子组件方法函数中调用了这个方法之后，父组件关联函数也会被触发关联的关键步骤在调用组件标签的时候使用一个方法名关联父组件方法名，然后传入子组件，通过this.$emit（方法名）来调用父组件方法


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计数器</title>
    <script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<div id="box">
    {{msg}}
    <my-compon v-on:add1="addtotal"></my-compon>
</div>

<template id="tt">
    <div>
        <button @click="jishuqi">计数器</button>
    </div>
</template>

<script>
    let vm = new Vue({
        el:'#box',
        data:{
            msg:1,
        },
        methods:{
            addtotal:function(){
                this.msg+=1;
            }
        },
        components:{
            "myCompon":{
                template:"#tt",
                methods:{
                    jishuqi:function(){
                        this.$emit("add1");
                    }
                }
            },
        }
    })

</script>

</body>

</html>