下面我将使用Vue自带的属性实现简单的双向绑定。
下面的例子就是利用了父组件传给子组件(在子组件定义props
属性,在父组件的子组件上绑定属性),子组件传给父组件(在子组件使用$emit()
属性定义一个触发方法,在父组件上的子组件监听这个事件)。
import Vue from 'vueEsm' var Com = { name:'Com', props:['val'], template:`<input type='text' @input='handleInput'/>`, methods: { handleInput(e){ this.$emit("input",e.target.value); } }, } new Vue({ el:'#app', data() { return { value:'' } }, components:{ Com }, template:` <div> <Com @input='post' :val='value'></Com> </div> `, methods:{ post(data){ this.value=data; } } }) 复制代码
上面这个例子,在input标签上每次输入时触发原生事件input
,在这个事件上绑定了一个handleInput
方法,事件每次触发都会执行方法里的$emit
属性。该属性里面第一个参数可以定义一个事件名,第二个参数可以传一个参数。这里我们把每次输入的值e.target.value
传进去。在父组件的子组件上监听这个事件,定义一个post
方法,方法的参数就是传入的数据。然后我们在父组件的data
属性里定义一个存储值的变量value
。将刚才传入的参数赋给这个变量value
。最后在父组件的子组件上绑定一个自定义属性,比如val
。将value
传给val
。在子组件定义一个props
属性接受这个val
。
这个例子对于理解父组件与子组件传值特别重要。