Vue的组件插槽
**插槽：**slot 作用 ：扩展组件
匿名插槽（无名），具名插槽（有名字的 使用name）
<template id="c">
<div class="c">
child
<slot>默认标题</slot>
<div class="box">
<slot name="top">
<em>头部</em>
</slot>
</div>
<slot name="body">内容</slot>
<slot name="footer">底部</slot>
</div>
</template>
在模板中设置
在区域内渲染
<div id="app">
<child>
<h3>标题2</h3>
<p slot="top">自定义的头部</p>
<div slot="body">自定义的内容</div>
<h4>标题4</h4> 即使匿名插槽写在命名插槽中，显示的在命名插槽上面
<p slot="footer">自定义的底部</p>
<p slot="top">自定义的头部</p>
</child>
组件之间传值
父传子：
1，在子组件中使用一个自定义属性接受父组件中的数据
2，在子组件中使用props接收这个自定义属性
校验父传子的值:props的值是个对象类型的时候，
可以校验传进来的值得类型，是否必传，如果没有传值设置默认值
type:添加传值的类型 ，default：设置默认值 ，required:true：：设置必传
注意：必传和设置默认值一般不共存
vue中props是单向的，只能父传子，子不能直接传父,并且传进来的值只能读，不能改
let childs={
template:'<div><h2>child</h2>拿到了{{this.childna}}</div>',
props:{
childna:{
type:[String,Number],
// default:'爸爸没有给房子',
required:true
}
}
}
let vm= new Vue({
el:'#app',
data:{
home:'爸爸的房子'
},
components:{
child:childs
}
})
**子传父：**
1, 给子组件自定义一个事件，事件绑定一个父组件的方法：方法中获取子组件的数据
2.在子组件模板中，触发一个方法，让这个方法去触发父组件中的方法
3，在子组件中定义一个方法，方法中使用$emit触发这个自定义属性，并将值传递给父组件
4，在子组件中触发自己定义的方法
5. $emit :vue自带的 ，发布订阅模式：先订阅再发布
<div id="app">
<!---@myhome:子组件的，getsonhome父组件的方法-->
<son @myhome="getsonhome"></son>
{{mysonh}}
</div>
<template id="s">
<div>子组件
<!---在子组件模板中，触发一个方法，让这个方法去触发父组件中的方法-->
<button @click="tomyhome">点我给爸爸房子</button>
</div>
</template>
<script>
let son={
template:'#s',
data(){
return {
h:'儿子买的房子'
}
},
methods:{
tomyhome(){
this.$emit('myhome',this.h);//自带的方法，用来触发父组件上传进来的方法
}
}
}
new Vue({
el:"#app",
data:{
mysonh:''
},
methods:{
getsonhome(val){
this.mysonh=val;
}
},
components:{
son
}
})
</script>
<div id="app">
<div ref="mydiv">123</div>
<p v-for="item in list" ref="myp">
{{item.name}}
</p>
</div>
<script>
//ref想要拿到多个值，必须是循环后的
new Vue({
el:"#app",
data:{
list:[]
},
created(){//初始化之后，data被注入，可以使用data数据了
console.log('created');
//调取后台的数据,get方法获取数据，params:传递的参数，headers:设置请求头信息
axios.get('./shoplist.json',{params:{n:1}, headers:{t:'123'}}).then((res)=>{//调取成功后执行then中回调
console.log('axios');//res 调取成功后的数据
this.list=res.data;
}).catch((err)=>{//调取失败后执行catch的回调，err是错误信息
console.log(err);
});
},
mounted(){//挂载之后，页面渲染完成，可以拿到元素了
console.log(this.$refs.mydiv);
},
watch:{
list(n,l){
this.$nextTick(()=>{//拿到异步操作的元素
console.log(this.$refs.myp);
})
}
},
updated(){
// console.log(this.$refs.myp[0].innerHTML);
}
})
</script>
使用axios调用后台数据
<div id="app">
<div ref="mydiv">123</div>
<p v-for="item in list" ref="myp">
{{item.name}}
</p>
</div>
<script>
//ref想要拿到多个值，必须是循环后的
new Vue({
el:"#app",
data:{
list:[]
},
created(){//初始化之后，data被注入，可以使用data数据了
console.log('created');
**//调取后台的数据,get方法获取数据，params:传递的参数，headers:设置请求头信息**
**axios.get('./shoplist.json',{params:{n:1}, headers:{t:'123'}}).then((res)=>{//调取成功后执行then中回调**
console.log('axios');//res 调取成功后的数据
this.list=res.data;
}).catch((err)=>{//调取失败后执行catch的回调，err是错误信息
console.log(err);
});
},
mounted(){//挂载之后，页面渲染完成，可以拿到元素了
console.log(this.$refs.mydiv);
},
watch:{
list(n,l){
this.$nextTick(()=>{//拿到异步操作的元素
console.log(this.$refs.myp);
})
}
},
updated(){
// console.log(this.$refs.myp[0].innerHTML);
}
})
</script>
