在Vue2中自定义组件可以使用v-model指令,来实现双向绑定,前提条件:
1、接收一个value属性
2、在有新的value时触发intput事件
案例
index.vue
<template> <div> total值:{{total}} <br/> <br/> <testVue v-model="total"></testVue> </div></template><script>import testVue from './testVue'export default { data(){ return { total: 0 } }, components: { testVue } }</script>
testVue.vue
<template><div> 传入的值: {{value}} <br/> <button @click="changeVal">改变值</button></div></template><script>export default { data(){ return { counter: 0 } }, propos: { // 接收外部通过v-model传入的只,必须是value value: {} }, methods: { changeVal(){ this.$emit('input', this.counter++) } } }</script>
作者:圆梦人生
链接:https://www.jianshu.com/p/d542cb29aa97
點擊查看更多內容
為 TA 點贊
評論
評論
共同學習,寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦