vue 自定义组件 v-model双向绑定、 父子组件同步通信

 

父子组件通信,都是单项的,很多时候需要双向通信。方法如下:

  1、父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx')

  2、父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身。

  3、父组件使用: v-model

  第一种曾经被废除过,由于维护成本的原因被删掉,但经过证实,确实有存在的意义,又被加上。

  第一种:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
父组件:
    <template>
  <div>
    <aa class="abc" :snycTest.sync="test" ></aa>
      {{'外面的值:' + test}}
    <button @click="fn">
      外面改变里面
    </button>
     
  </div>
</template>
 
<script>
import aa from './test.vue'
  export default {
    data () {
      return {
        test: ''
      }
    },
    methods: {
      fn () {
        this.test += 1
      }
    },
    components:{
      aa
    }
  }
</script>

  

子组件:
<template>
<div>
<ul>
<li>{{'里面的值:'+ snycTest}}</li>
<button @click="fn2">里面改变外面</button>
</ul>
</div>
</template> <script>
export default {
props: {
snycTest: ''
},
methods: {
fn2 () {
this.$emit('update:snycTest', this.snycTest+1) //这儿是关键 update:snycTest 自定义事件会告诉父组件将父组件的 test值改为this.snycTest+1,并传回给子组件。
} } } </script>

v-model写法一:

父组件:
<template>
<div>
<aa class="abc" v-model="test" ></aa> // 组件中使用v-model
{{'外面的值:' + test}} // 这儿试验test与内部msg值为双向绑定关系
<button @click="fn">
外面改变里面
</button> </div>
</template> <script>
import aa from './test.vue'
export default {
data () {
return {
test: ''
}
},
methods: {
fn () {
this.test += 1
}
},
components:{
aa
}
}
</script>
子组件写法一:
<template>
<div>
<ul>
<li>{{'里面的值:'+ msg}}</li>
<button @click="fn2">里面改变外面</button>
</ul>
</div>
</template> <script>
export default {
model: { // 使用model, 这儿2个属性,prop属性说,我要将msg作为该组件被使用时(此处为aa组件被父组件调用)v-model能取到的值,event说,我emit ‘cc’ 的时候,参数的值就是父组件v-model收到的值。
prop: 'msg',
event: 'cc'
},
props: {
msg: ''
},
methods: {
fn2 () {
this.$emit('cc', this.msg+2)
}
}
}
</script>

v-model写法二

  父组件 <aa class="abc" v-model='test' ></aa> 。
子组件
<template>
 <div>
<ul>
<li>{{'里面的值:'+ value}}</li> // 组件使用时有v-model属性,value初始传的‘what’ 不会被渲染,而是v-model绑定的test值被渲染,这儿value会被重新赋值为v-model绑定的test的值。
<button @click="fn2">里面改变外面</button>
</ul>
</div>
</template> <script>
export default {
props: {
value: { // 必须要使用value
     default: '',
    },
}, methods: {
fn2 () {
this.$emit('input', this.value+2) // 这儿必须用input 发送数据,发送的数据会被父级v-model=“test”接受到,再被value=test传回来。
}
}
}

一般双向绑定用v-model写法一。

    

 
 

使用 v-model 实现 双向绑定.(子组件和父组件.)的更多相关文章

  1. vuejs利用props,子组件修改父组件的数据,父组件修改子组件的的数据,数据类型为数组

    博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...

  2. 使用vue开发输入型组件更好的一种解决方式(子组件向父组件传值,基于2.2.0)

    (本人想封装一个带有input输入框的组件) 之前使用vue开发组件的时候,在遇到子组件向父组件传递值时我采用的方法是这样的: 比如子组件是一个输入框,父组件调用时需要获取到子组件输入的值,子组件通过 ...

  3. Vue 子组件传父组件

    vue中的传值是个很烦的问题,记录一下自己完成的这个需求. 首先,被引用的称之为子组件,当前页面为父组件,这个不能搞错. 子组件传值,要用到this.$emit. 子组件页面,需要在一个函数中使用th ...

  4. vue2.0 子组件和父组件之间的传值(转载)

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

  5. vue 子组件调用父组件的方法

    vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...

  6. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  7. 【转】Vue组件一-父组件传值给子组件

    Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...

  8. Vue2.0 子组件和父组件之间的传值

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

  9. vue2.0子组件修改父组件props数据的值

    从vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的如下: 目的是为了阻止子组件影响父组件的数据那么在vue2.0之后 如何在子组件修改父组件props ...

随机推荐

  1. POI技术

    1.excel左上角有绿色小图标说明单元格格式不匹配 2.模板中设置自动计算没效果,需要加上sheet.setForceFormulaRecalculation(true); FileInputStr ...

  2. 内存中DataTable去除重复行

    删除内存中DataTable表的重复行 假设在内存中(不是数据库中)有两个表: 表一:TableA Name Phone 张三 123456 李四 123457 王五 1234568 表二:Table ...

  3. asp.net web 自定义控件

    0.调用代码 protected override void Page_Load(object sender, EventArgs e) { //给基类服务接口复制,可不付 if (IsPostBac ...

  4. 简单的Cooki案例——记录用户上次访问该网页的时间

    功能: 帮助网站实现提示客户端计算机上次访问网站的时间 实现原理: 将每一个会话作为一次访问过程,将每次会话的开始时间作为每次访问网站的时间,然后将这个时间以Cookie的形式存储到客户端的计算机中, ...

  5. ssh试卷

    2.简述Hibernate的工作原理. 答:首先,Configuration读取Hibernate的配置文件及映射文件中的信息,即加载配置文件和映射文件,并通过Hibernate配置文件生成一个多线程 ...

  6. Mybaties原理图

  7. jQuery高级

    一.动画效果 常用的几种效果都是没有easing参数的,也即动画只能swing.$(selector).animate(styles,speed,easing,callback)中是有easing参数 ...

  8. 关于 XML 字段内容查询

    找到个总结相当好的知识点的归纳,记在自己的博客里也方便查询 /* sql xml 入门:     --by jinjazz     --http://blog.csdn.net/jinjazz     ...

  9. mvc - codefirst 数据迁移

    from :http://blog.csdn.net/xiaoyiyz/article/details/41485325

  10. go的Type switch是一个switch语句么?

    相信这样的语句在go中大家见的很多 switch t := arg.(type) { default: fmt.Printf("unexpected type %T\n", t) ...