在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>
Logo

前往低代码交流专区

更多推荐