vue学习——刚学Vue组件,吐槽一个东西
2018-11-01 22:48
148 查看
原文链接:http://www.cnblogs.com/famine/p/9893173.html
Vue组件的props是用来传值的
- 这里是官方链接
template:"<bbb @click='onClick()'>{{value}}</bbb>", //"<div>{{value}}</div>"
讨厌的东西就出在这行代码,一个组件的 template
调用同级别的组件 bbb
然后使用 props
传值,结果是行不通的,并且没有报错!虽然,明知道是什么问题,可是还是令我感到不舒服。
测试代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Vue组件学习demo2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<aaa value="233"></aaa>
<bbb value="233"></bbb>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script>
//aaa组件
Vue.component("aaa",{
template:"<bbb @click='onClick()'>{{value}}</bbb>", //"<div>{{value}}</div>"
methods: {
onClick:function(){
console.log("点击了a的onClick()")
},
},
props:['value']
})
//bbb组件
Vue.component("bbb",{
template:"<h2 @click='onClick()'></h2>",
methods: {
onClick:function(){
alert("点击了b的onClick()")
},
},
})
var app = new Vue({
el: '#app',
})
</script>
</body>
</html>
[/code]
转载于:https://www.cnblogs.com/famine/p/9893173.html
相关文章推荐
- Vue的学习总结自测(四)——v-model的原理,组件data为什么是一个函数,keep-alive,父组件监听子组件的生命周期
- vue学习系列-完成一个分页组件的封装
- Vue.js学习 Item16 – 实现一个自定义分页组件vue-paginaiton
- 6、用vb6写一个仿照SPY++的东西,供大家参考学习用
- VUE 同一个组件切换 实现DOM更新
- WEB前端 vue学习二 组件之间的数据传递
- vue自定义组件和列表循环--vue学习笔记
- vue学习笔记 - 组件通信01
- android菜鸟学习笔记25----与服务器端交互(二)解析服务端返回的json数据及使用一个开源组件请求服务端数据
- vue路由学习-缓存路由组件
- vue中实现一个全局的message组件
- Vue.js 学习10 Element基于Vue2.0的组件库
- 利用vue-cropper做的关于图片裁剪、压缩、上传、预览等做的一个公共组件
- Vue 2.0学习笔记:实现组件数据的双向绑定
- Vue组件中的data必须是一个function的原因浅析
- vue.js重学之旅(3)——vue.js组件学习and组件间通信
- Vue.js学习(一):用render函数渲染组件
- Vue-组件学习
- Vue.js学习-搭建一个简单的demo
- vue实现一个组件容器