js調用vue方法，vue.js引入封裝組件

今天在vue和js共存的html中開發，首次碰倒這種，雖然簡單但自己還是不會。
在這裏簡單記錄一下VUE和JS方法的互相調用

<script>
		new Vue({
			el: '#app',
			data: function() {
				return { 
				}
			},
			created: function (){
				window.creatAjaxF = this.creatAjaxF();
			},
			methods: {
				creatAjaxF(){
					console.log('我是VUE中的函數，')
				}
			}
		})
		function attempt() {
			var a = '我是js 中方法'
			return a
		}
</script>

vue 調用js 的方法：

	//直接在vue中調用方法名即可
	created: function (){
		attempt()
	}

js 調用vue 的方法：

	//將new Vue({ })賦值給一個變量，js中通過： 變量.方法名()    如下
	var vm = new Vue({
			el: '#app',
			data: function() {

	function attempt() {
		var a = '我是js 中方法'
		vm.creatAjaxF()   //vue中方法
		return a
	}

html 中引入vue.js，封裝組件簡單方法 記錄下

   //父元素
   <child1 ref="child1"></child1>  //標籤
   
   <script src="assets/component/viewDetails.js"></script>  //引入
   
   components:{
		'child1': child1
	},
	
	lookClick(val) {
		this.$refs.child1.lookClick(val);   //父組件調用子組件（lookClick）方法
	},

	//  viewDetails.js  封裝的組件
	var child1 = {
    props: {  //接受參數
        // form_buy: {
        //     type: Object,
        //     default: ''
        // }
        form:{}
    },
    template: '<div>\n' +
    '<el-dialog title="詳細內容" :visible.sync="dialogFormVisible_sell" id="formDiv" width="65%" :modal-append-to-body="false" center style="z-index: 2002;">\n' +
    '<el-form label-position="center" label-width="120px">\n' +
        '<el-row :gutter="20">\n' +
           '<el-col :span="12"><el-form-item label="手機號:">{{form_sell.phone}}</el-form-item></el-col>\n' +
        '</el-row>\n' +
    '</el-form>\n' +
	'</el-dialog>\n' +
   '</div>',

    data() { //Vue中component的data必須通過function() return
        return {
            dialogFormVisible_sell: false,
            form_sell: {
                orderNum:'',
            },
                addr_type:''
            },
        }
    },
    methods: {
        lookClick(val){
            // code ...
        }
    }

}