v-model —>
:value=“variable” +
@input=“variable=$event.target.value”
---------------------------分割线-----------------------------------------------
在父组件使用v-model A.监听 input B.绑定 variable
<input ref=“input” :value=“value” @input="$emit(‘input’, $event.target.value)">
子组件 value 是父组件的value
子组件 props: [‘value’],
子组件 @input="$emit(‘input’, $event.target.value)"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.3.0/vue.js"></script>
</head>
<body>
<div id="demo">
<span>{{price}}</span>
<br>
<!-- <currency-input v-model="price"></currentcy-input> -->
<currency-input :value="price" @input="price = arguments[0]"></currentcy-input>
</div>
<template id="cin">
<span>
<input ref="input" :value="value" @input="$emit('input', $event.target.value)">
</span>
</template>
<!--为什么这里把 'input' 作为触发事件的事件名？`input` 在哪定义的？-->
</body>
<script>
Vue.component('currency-input', {
template: "#cin",
props: ['value'],
})
// 为什么这里要用 value 属性，value在哪里定义的？貌似没找到啊？
var demo = new Vue({
el: '#demo',
data: {
price: 100,
},
watch:{
price(val){
console.log("watch---",val)
}
}
})
</script>
</html>
290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
