脚本宝典收集整理的这篇文章主要介绍了vue.js 学习笔记,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
父组件
<ratingselect :only-content='onlyContent' :desc='desc'></ratingselect>
子组件
props: {
onlyContent: {
type: Boolean,
default: false
},
desc: {
type: Object,
default(){
return {
all: '全部',
positive: '满意',
negative: '不满意'
};
}
}
}
父组件通过添加属性的方式向子组件传递数据,如果属性名是驼峰命名例如onlyContent
,要转换成only-content
,子组件通过props
接收父组件传过来的数据,并且可以通过type制定数据类型,default定义默认数据
子组件
this.$emit('show-content',this.isOnlyContent);
父组件
<ratings v-on:show-content="ratingTypeSelect"></ratings>
methods:{
isShowContent(isOnlyContent){
this.onlyContent = isOnlyContent
this.$nextTick(function () {
this.foodScroll.refresh();
})
}
}
子组件通过$emit
触发父组件调用子组件监听的的show-content
事件执行的ratingTypeSelect
的方法,并且传入this.isOnlyContent
为参数。
isShowContent(isOnlyContent){
this.onlyContent = isOnlyContent
this.$nextTick(function () {
this.foodScroll.refresh();
})
}
$nextTick是在修改数据,并且dom更新完毕后在执行的一个回调,例如我上面的代码,更改了onlyContent,更改完成后,页面的dom元素会根据更改后的值做出相应的变化,等dom渲染完毕,在执行refresh方法
<keep-alive>
<good :is='curremtView' ></good>
</keep-alive>
如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令
<style scoped></style>
在每一个vue组件中都可以定义各自的css,js,如果希望组件内写的css只对当前组件起作用,只需要在style中写入scoped
<td colspan="5" ref="total-prices">总价:{{total}}</td>
在元素或者组件中都可以用ref来绑定组件,在方法里面直接用 this.$refs["total-prices"]
就表示引入这个dom元素或者组件。如果ref名称为驼峰命名或者都是小写,例如 ref="totalPrices"
直接用this.$refs.totalPrices
来引用
以上是脚本宝典为你收集整理的vue.js 学习笔记全部内容,希望文章能够帮你解决vue.js 学习笔记所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。