这次想说一下自定义组件的赋值问题。为了在画面中使用日期选择,导入了vue-calendar,示例代码如下: 因为需要使用的地方有多处,所以打算把它做成一个自定义组件。 然后,在view界面就可以通过下面的方式使用了: 这里说一下,component 里面,为什么要把value和dateValue分开,因为给component赋值的时候,只能通过props进行赋值。如果赋值完需要更新的话,就必须使用data或者compute进行绑定。不然的话,就会爆出下面的错误: 上面的组件的写法,可以实现父到子之间的赋值传递,但是子组件里的值改变的时候,不会跟父组件进行联动。为了实现子组件到组件的赋值联动,还需要加上下面这么一段: 子组件的值改变的时候,通过watch检测出来,然后执行 this.$emit(‘input’, val), 这段代码需要解释一下,下面两种方式作用其实是相同的。 在子组件执行 this.$emit(‘input’, val) ,其实是触发了父组件的input event。这样就可以把值传递会去了。 所以,总结一下就是,父→子之间通过props进行传值,然后子→父通过$emit进行传值。最后,完整的示例代码如下: 参考文章:https://jp.vuejs.org/v2/guide/components-custom-events.htmlhttps://vcalendar.io/datepicker.htmlhttps://recruit.cct-inc.co.jp/tecblog/vue-js/vue-emit-props/

Read More
Close Bitnami banner
Bitnami