组件案例——评论列表


创建一个实例子对象

组件案例

定义 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。

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-12-21
  • 2021-10-19
  • 2021-11-23
  • 2021-12-10
  • 2022-01-31
  • 2022-12-23
猜你喜欢
  • 2021-04-19
  • 2022-12-23
  • 2021-12-06
  • 2021-05-31
  • 2022-12-23
  • 2022-12-23
  • 2021-09-12
相关资源
相似解决方案