组件案例

组件案例——评论列表


创建一个实例子对象

组件案例

定义 tmpl组件案例
定义 postComment 方法

组件案例
有可能获取不到数据(没有添加进去),所以 var list = JSON.parse(localStorage.getItem(‘cmts’) || ‘[]’) 防止报错。this.$emit(‘func’) 是触发 func 事件。

定义父实例

组件案例
把添加的数据覆盖早先创建的虚假数据。

使用组件

组件案例

总结

还是结合前一篇文章的知识,用 this.$emit(‘名称’) 来触发,接着再 methods 定义该名称。上面例子主要还是学习 localStorage 。var list = JSON.parse(localStorage.getItem(‘随意名称’) || ‘[ ]’) ,localStorage.setItem(‘随意名称’, JSON.stringify(list))。

ref获取DOM元素和组件

定义DOM元素内容

组件案例
组件案例

调用DOM元素和组件

组件案例
运行结果:
组件案例

思路

在标签处加入 ref = “名称”,可以通过事件绑定@ click =“aaa”,在 methods 定义 aaa 方法 this.$refs.名称.xxx。