以下示例是用单页面的形式写的。
a.vue // a.vue是父级引用组件b.vue
<template>
<!-- 这儿是组件的父级,也就是组件的实例。实例本来应该定义事件来监听子组件的一切“异动”, 但v-model呢却是给组件内部加个model:{prop:"自定义",event:"自定义"}来监听子组件的变化 --> <cst-test v-model="cstChecked"></cst-test> cstChecked:{{ cstChecked }} </template>
js里引入
import cstTest from "@/components/tcctest/tcctest_index.vue"
定义变量:data:{cstChecked :0}
注册组件:components:{cstTest }
b.vue // 组件文件,b.vue引入test_refer.js
<template> <div> <label><input type="checkbox" :checked="ychecked" @click="mychange($event)"/> 勾我吧</label> </div> </template> <style> </style> <script> import test_refer from "./test_refer.js" // 引入模板对应的js export default test_refer; </script>
test_refer.js //单独拆出来的一个js文件,:
export default {//这里的东西,我们称为组件 data() { return { msg: 'haha!'} }, /** * vue提供model属性让我们在组件内部就可以调用到其父级的事件, * 当前父级事件是固定写法event:"zhangwuji",这个prop:"ychecked"是 * 将父级的cstChecked赋值给ychecked,然后再传给props:{ychecked:Number} * */ model:{ prop:'ychecked', // ychecked与父级cstChecked联动 event:"zhangwuji" // 事件名随便定义,叫张无忌都可以,反正有了model后就可以触发父组件的事件了,zhangwujijt }, props:{ ychecked:Number // 父级cstChecked传进来会默认赋值给了model{prop:"ychecked"},ychecked再把值赋给props:{ ychcked:Number } } , methods:{ mychange:function($event){ // mychange由checkbox元素的原生事件触发 如change、blur、focus、click var number = 0; if($event.target.checked){ // $event.target.checked得到原生checkbox的布尔值 number = 1; } /** * vue自带的$emit方法是专门用来触发父级事件的,如父级:<cst-test v-model="cstChecked"></cst-test> ,此处v-model 跟上面的定义model有关联, * 当zhangwuji事件触发后会默认把值传给prop:'ychecked',从而改变了在父级传入的变量cstChecked * */ this.$emit('zhangwuji',number) } } }
Brief summary:
以上就是完整示例,组装好就可以运行了。