vue实现v-model父子组件间的双向通信

首先讲清楚有个缺点:父页面若同时使用多个子组件,永远只会只能实现第一个双向驱动,我是新手,还在研究。如果有高手请指教,感谢!

子组件

<script>
  export default {
    model: {
      prop: ‘path‘,
      event: ‘cc‘
    },
    props: {
      label: {type: String, default: ‘点击‘},
      path:String,
    },

    methods: {
      btnChange() {
        this.$emit(‘cc‘, res.data)
      },

    },    

  }
</script>
<template>
  <div>
    <el-input :value="path" disabled></el-input>
    <el-button size="small" type="primary" @click="btnChange">{{label}}</el-button>
  </div>
</template>

父组件

<template>
  <div>
    <subinput v-model="form.text"/>
  </div>
</template>

<script>
  import subinput from ‘@/components/Upload.vue‘
  export default {
    components: {
      subinput
    },
    data() {
      return {
        activeName: ‘first‘,
        form: {text:‘‘},
      }
    }
}

</script>

原文地址:https://www.cnblogs.com/he-bo/p/11124066.html

时间: 2024-10-09 16:34:36

vue实现v-model父子组件间的双向通信的相关文章

Vue入门七、父子组件间通讯

一.父子组件通讯 父传子:1.父用子的时候通过属性传递2.子要声明props:['属性名']接收3.子组件template中直接用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="

第四节:Vue表单标签和组件的基本用法,父子组件间的通信

vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"&

vue的父子组件间传值以及非父子间传值

Vue组件间的传值方式: 父传子 子传父 非父子间传值 1.首先父组件传值给子组件,使用bind绑定属性,然后在子组件用props接收属性值. //父组件 <template> <input type="text" /> <br/> <child :inputValue="inputValue"></child> </template> <script> import child f

非父子组件间的传值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title> <script src="./vue.js"></script> </head> <body> <div

父子组件间的传值

父子组件间通信 父组件-->子组件 1.父组件通过给子组件添加属性给子组件传值,子组件通过props来接受. 2但是要在属性前加“:”,即使用v-bind指令,才能使属性值是js代码,不然就是字符串. 3.单项输出流.即子组件不允许修改父组件传递的值,只能使用,不能修改. 父组件通过属性向子组件传值时,如果传递的是引用型的值,这时候子组件对父组件传递的值进行修改可能会影响其他子组件对这个引用类型值的使用. 解决办法:子组件在data项中新赋值父组件的变量,操作新的变量即可. 子组件-->父组件

非父子组件间传值(一)

非父子组件间传值有两种方法,一种是vuex共享数据,另一种是发布订阅模式/观察者模式/总线/Bus.这篇随笔主要总结总线机制的学习心得: 首先通过在Vue.prototype上挂载一个bus属性,指向vue实例:接下来在调用Vue或者创建组件时都会有bus属性. Vue.prototype.bus=new Vue() var Child={ props:['content'], data:function() { return {num:this.content} }, //因为vue是单项数据

非父子组件间通信

非父子组件之间的通信,可以通过一个空的 Vue 实例作为中央事件总线(事件中心),用他来触发事件和监听事件. 在这里,如果是工作中的新手看了官网的例子直接上手写,会有些发懵.这个作为事件总线空的 Vue 实例我该写哪里去?因为工作中我们的组件都是互相独立的,不可能写一起的,作用域是不同的,所以需要稍作调整 一.在 main.js 中初始化根 Vue 之前,添加一个 data 对象,内写入一个名为 Event 的空 Vue 对象,也就是中央事件总线 new Vue({ el: '#app', da

NO17--vue父子组件间单向数据流的解决办法

在上一篇中讲解了父子组件之间是如何传值的,如果子组件需要改变传过来的数据供自己使用,或者想在子组件中改变传过来的数据并同步到父组件,那么直接改肯定是不行的,如果你这么做了,Vue 会在控制台给出警告. 对应这两种情况,解决方式如下: 先创建项目并运行 vue init webpack-simple templatecd templatenpm inpm run dev 一. 子组件需要改变传过来的数据供自己使用 1. 定义一个局部变量,并用 props 的值来初始化它 在 App.vue 中 <

Vue2.0入门系列——父子组件间通信

1.子组件更新,父组件不变 点击"按钮"按钮,子组件数据被修改,父组件数据不变  =========>>>>>>  项目源代码, <head> <meta charset="UTF-8"> <title>v2.0父子组件通信</title> <script src="./vue.js"></script> <script> wi