jq项目中使用vue的技巧

在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:'
{{childTest}}
',
    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>