Vue插槽使用 匿名和具名插槽
<body>
<div id="box">
<div>
<Child-A>
<h1 >我是匿名插槽</h1>
<h1 slot="gy1">我是A</h1>
<h1 slot="gy2">我是B</h1>
</Child-A>
</div>
</div>
<template id="child">
<div>
<!-- 匿名插槽 -->
<slot></slot>
<!-- 具名插槽 -->
<slot name="gy1"></slot>
<h1>123123</h1>
<slot name="gy2"></slot>
</div>
</template>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#box',
data:{
},
components:{
ChildA:{
template:'#child'
}
}
})
</script>
强制渲染视图
<div id="box">
<ul>
<li v-for="(item,i) in str" :key="i" @click="del(i)">
<h1>{{item}}</h1>
</li>
</ul>
<button @click="end">添加年龄</button>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#box',
data:{
str:[{name:'zhangsan'},{name:'lisi'}]
},
methods: {
end(){
/* 更新数据渲染视图两种方式 */
this.str.forEach(r=>{
/*直接使用Vue提供的方法this.$set */
/* this.$set(r,'age',30) */
r.age=30
})
/*添加this.$forceUpdate();进行强制渲染，效果实现*/
this.$forceUpdate()
},
del(i){
/* 删除数据渲染视图两种方式 */
/*this.$delete(this.str[i],'name') */
/*this.str.splice(i,1) */
delete this.str[i].name
this.$forceUpdate()
}
},
})
</script>
es6导入导出
html文件：
JS文件：
