VUE 自定义子组件v-bind及v-on指令的大小写问题
博主更多实战教程：.NET WebApi实战教程 微信小程序实战教程
Vue好不好？呵呵，也许好，也许不好。那他的语义定义好不好？只能说马马虎虎。心情不好点，可以说，那就是灾难
看如下：父向子组件传递参数过来，使用v-bind指令，我说去你大爷！使用砣峰式，页面啥也不渲染！！页面空白！不知道为啥？这种低等的BUG，能出现在一个相对成熟的框架中，也是有些恶心到人。
再看如下：子组件向父传递回调，尼玛，V-ON后面的方法出现驼峰时，根本无法回馈到父方法！采用纯小写，就没有问题。
以上算是留给自己做个记录吧，真特么的烂框架。
以下源码，有兴趣的同学，可以参考研究一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<ol>
<todo-item v-for="item in sites" v-bind:datamodel="item" v-on:clickAction="clickDoAction"></todo-item>
</ol>
</div>
<script>
var childNode = {
props: ['datamodel'],
template: '<li v-on:click="mmiAction">{{ datamodel.name }}</li>',
methods: {
mmiAction:function(){
this.$emit('clickAction');
}
}
}
new Vue({
el: "#app",
data:{
sites:[
{ name: 'name',age:20},
{ name: 'namew',age:21 },
{ name: 'nameq',age:22 }
]
},
components:{
todoItem:childNode
},
methods:{
clickDoAction:function()
{
alert("hohohoh");
}
}
});
</script>
</body>
</html>
VUE 自定义子组件v-bind及v-on指令的大小写问题相关推荐
- $emit自定义子组件和父组件通信
自定义子组件和父组件通信 在我们开发组件时, 子组件可能要求我们和父级组件进行沟通; $emit 触发当前实例上的事件, 附加参数都会传给监听器回调; eg <!DOCTYPE html> ...
- php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
- [vue] 在子组件中怎么访问到父组件的实例？
[vue] 在子组件中怎么访问到父组件的实例? 通过this.$parent 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前 ...
- vue 自定义封装组件 使用 model 选项
自定义组件的 v-model 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框.复选框等类型的输入控件可能会将 value 特性用于不同 ...
- 浅入深出Vue：子组件与数据传递
上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...
- vue $emit子组件传出多个参数，如何在父组件中在接收所有参数的同时添加自定义参数...
前言 很多时候用$emit携带参数传出事件,并且又需要在父组件中使用自定义参数时,这时我们就无法接受到子组件传出的参数了. 找到了两种方法可以同时添加自定义参数的方法. 方法一 子组件传出单个参数时: ...
- Vue学习--子组件向父组件传值
Vue–子组件向父组件传值 //子组件 <template><div id="foot"><li @click="point(1)" ...
- vue 自定义popup组件并支持scroll组件
本来是使用第三方库 vant的vue 组件库 的popup,后来在popup中使用better-scroll插件的时候,出现并不兼容的情况,也就自己搭建一个popu插件,中间遇到很多问题,都会记录一下 ...
- vue 自定义弹窗组件
父组件 <template><div><p @click="onDelete">打开</p><!-- 弹框 -->< ...
最新文章
- web站点的欢迎页面
- R语言ggplot2可视化：使用ggfortyify包中的autoplot函数自动可视化时间序列数据（Time Series Plot From a Time Series Object (ts)）
- ES6简单总结（搭配简单的讲解和小案例）
- Spring Hello World
- isc-dhcp监听网口的实现步骤
- 21 张让你代码能力突飞猛进的速查表（神经网络、线性代数、可视化等）
- 利用CMD在vim中直接编译
- 气缸标识上vr什么意思_汽车VR传感器是什么意思？
- Java 网络编程（三） 创建和使用URL访问网络上的资源
- 防热服的设计数学建模_数学建模之高温作业专用服装设计.pdf
- 如何将Oracle卸载干净
- 户籍管理系统php,户籍管理系统.rar - 源码下载|Windows编程|数据库编程|源代码 - 源码中国...
- mac根目录无法新建文件夹
- java 监听客户端的退出_Java socket 服务端如何监控客户端异常关闭？
- 【计算机网络】网络通信协议
- 嵌入式开发——程序跑飞原因总结
- 【linux】-find、rm、kill等常用命令
- 华为al00的计算机在哪,华为trt-al00是什么型号
- android bilibili弹幕技术解析,bilibili高并发实时弹幕系统的实战之路（1）
- 十大知名厂商ERP解决方案集锦