jq项目中使用vue的技巧
在jq项目中使用vue经常会碰到父组件和子组件在不同的js文件中。而在这种情况下 props 传参数无效,event使用很麻烦。下面介绍一些小技巧。var vm=new vue({data(){return {test0:"我是vue的参数"}},methods:{testFun(){
·
在jq项目中使用vue
下面介绍一些小技巧。
var vm=new vue({
data(){
return {
test0:"我是vue的参数"
}
},
methods:{
testFun(){
alert("我是vue的方法")
}
}
})
alert(vm.$data.test0);
vm.testFun();
在不同的js中调用vue的子组件&子组件调用父组件
//这个是a.html 中
<div id="vueApp" >
<childvm ref="myChild"></childvm>
</div>
//这个是a.html 中
var vm=new vue({
el: '#vueApp'
data(){
return {
test0:"我是vue的参数"
}
},
components:{
childvm:childVm
},
})
//这个组件是 b.js,a.html引入b.js
var childvm=
Vue.extend({
template:'<p>{{childTest}}</p>',
data(){
return {
childTest:"我是vue子组件的参数"
}
},
methods:{
childFun(){
vm.testFun()//调用父组件方法
//或
this.$parent.testFun()
alert("我是vue子组件的方法")
}
}
})
//**在js文件中调用vue的子组件方法**
vm.$refs.myChild.childFun();
类似这种jq插件,结合vue也是很方便。
分别是echarts.js ,morris, bootstrap dataTables
注意: 经常会碰到父组件和子组件在不同的js文件中。
而在这种情况下 props 传参数无效,很有可能是参数大小写不规范的问题,最好不要用驼峰写法。
这里就有一个坑,例如:如果将js代码中将子组件childvm 驼峰写法childVm,那么父组件就要写成child-vm,页面则会输出NaN,并且没有任何警告。
所以干脆我上面就不写驼峰了。直接childvm 省去很多麻烦。
props 传参数也是如此。所以在js中使用vue命名方式最方便的方法就是不要驼峰。
props :["mymessage"],或props :["my-message"]
var childvm=Vue.extend({})或者
var child-vm=Vue.extend({})
html:
<div id="vueApp" >
<childvm mymessage='传参'></childvm>
<child-vm my-message='传参'></child-vm>
</div>
更多推荐
已为社区贡献11条内容
所有评论(0)