vue 动态组件绑定model,vue自定义组件怎么用v model

　　vue中父子组件之间的通信是单一的，直接修改子组件中prop transmission的值会给出警告。接下来用一个小例子一步步实现vue自定义组件的v-model双向绑定。有需要的可以参考一下。

　　在项目中，将会遇到一个自定义公共组件供项目调用。一般情况下，可以使用props定义参数来接收父组件传递的参数，然后通过子组件的$ emit()方法将数据发回给父组件。

　　类似如下：

　　父组件

　　common-checkbox:checked= goods selected class= left :height= 16px :width= 16px @ check change= check change /common-checkbox

　　/**

　　*接收子组件退货进行处理。

　　*/

　　checkChange(值){

　　This.goodsSelected=value//子组件的数据被分配给父组件

　　}

　　组件

　　/**

　　*切换选定的返回。

　　*/

　　toggleCheck(值){

　　这个。$ emit (change check ，value)//回发方法，该方法将子组件已更改的数据发送回父组件进行处理。

　　}

　　但是这种编写方法需要调用公共组件的附加页面编写方法，而且太低级了。我们能像框架自带的公共组件一样声明直接的v-model双向绑定吗？其次，给出了项目中实际情况的处理方法。

　　第一种方式：

　　一般情况下，当你在父组件中将v-model属性绑定到子组件时，默认情况下，v-model绑定的数据会被支付给子组件中名为value的props属性。value还是需要提前在子组件props中声明，否则不会收到。

　　当值被修改时，它不会立即双向发送回父组件。如果您想要发送回实现父组件同步更新的v-model，您需要以下操作

　　这个。$emit(输入，值)

　　当双向绑定返回的事件未声明时，默认情况下由输入事件返回。为什么说“双向绑定返回的事件未声明时”？这是第二种方式，下面会讨论。

　　简单来说，第一种方式是用v-model绑定父组件数据，然后自动接收子组件值的props属性。最后，当数据改变时，这个。调用$emit(input ，value)发回父组件，使父组件实现双向绑定，无需子组件的额外反馈。

　　第二种方式：

　　如前所述，“当双向绑定回发的事件未声明时”默认使用输入回发。既然是这样，那就存在。如果我不用输入呢？有必要知道vue的一个特殊属性：型号。此属性可用于声明子组件使用哪个字段接收双向绑定的数据，以及使用哪个方法回调和更新父组件v-model的数据。它是这样写的：

　　导出默认值{

　　名称： CommonCkeckBox ，

　　型号：{

　　道具：“已检查”，

　　事件：“更改检查”

　　},

　　道具：{

　　已检查：{

　　类型：布尔型，

　　默认值：false，

　　}，//选定的状态

　　}

　　}

　　这种编写方式意味着双向绑定的父组件的数据将被绑定到名为checked的子组件的props属性，并且当子组件调用此。$emit(changeCheck ，value)，它会同步更新父组件的数据，实现双向绑定。

　　接下来，附上一段自定义复选框代码以供参考：

　　模板

　　div class= check-box-container @ click= toggle check():style= { width:width，height:height}

　　div class=复选框图标

　　！-三种状态：选中、未选中和禁用-

　　img alt:src= ` $ { $ cdnImageUrl }/cart/icon-selected . png `:width= width :height= height key= select v-if= checked！已禁用/

　　img alt:src= ` $ { $ cdnImageUrl }/cart/icon-unselected . png `:width= width :height= height key= unselected v-if=！检查过了！已禁用/

　　img alt:src= ` $ { $ cdnImageUrl }/cart/icon-unselected . png `:width= width :height= height class= disabled key= unselected v-if= disabled /

　　/div

　　插槽/插槽

　　/div

　　/模板

　　脚本

　　/**

　　*全球统一弹出窗口

　　*/

　　导出默认值{

　　名称： CommonCkeckBox ，

　　型号：{

　　道具：“已检查”，

　　事件：“更改检查”

　　},

　　道具：{

　　已检查：{

　　类型：布尔型，

　　默认值：假的，

　　}, //选中状态

　　已禁用：{

　　类型：布尔型，

　　默认值：假的，

　　}, //是否禁用

　　宽度：{

　　类型：字符串，

　　默认值：“16px”，

　　}, //按钮默认宽度

　　高度：{

　　类型：字符串，

　　默认值：“16px”，

　　}, //按钮默认高度

　　},

　　已创建(){

　　},

　　data() {

　　返回{

　　}

　　},

　　方法：{

　　/**

　　* 切换选中回传

　　*/

　　toggleCheck() {

　　这个$emit(changeCheck ，本。已检查)

　　这个emit(toggleCheck )

　　}

　　},

　　观察：{

　　已检查：{

　　处理程序（新值，旧值){

　　//开放状态变更事件

　　这个emit(onChange )

　　},

　　深：真的

　　}

　　},

　　}

　　/脚本

　　样式lang=scss 范围。复选框-容器{

　　显示：内嵌-块；复选框-图标{

　　img{

　　transform:平移z(0)；

　　意志改变：自动；

　　}。已禁用{

　　背景色：# f5f5f5

　　边界半径：50%;

　　}

　　}

　　}

　　/风格

　　父组件：

　　通用复选框v-model= item。所选商品 class= left :width= 16px :height= 16px /common-checkbox

　　具体用哪种方式根据项目场景选择，若第一种不满足需求，可以尝试第二种实现。

　　总结

　　到此这篇关于某视频剪辑软件自定义组件实现v型车双向绑定数据的文章就介绍到这了，更多相关vue v型双向绑定数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。