1.$refs可以用来进行父子级间通信。ref被用于作为子组件的索引ID,用以方便的在js中直接访问子组件。用法如下parent.$refs.idname

使用方法:

在父级元素上加上ref属性

<button @click='change'>点击</button>
<app-test ref='child'></app-test>

  

methods:{
change:function(){
this.$refs.child.changehandle('父级传到子级')
}
}

  子组件部分:

<template>
<div>
<input type="text" v-model='test' @change="changehandle(test)">
</div>
</template>

  

methods:{
changehandle:function(test){
console.log(test)
this.$emit('input',test)
}
}

  这样可以输出父级传入的内容,输出为‘父级传到子级’

2.双向数据绑定

使用v-model来进行双向数据绑定,但是实际上这只是一个语法糖,本质是事件监听。

<input v-model="something">

  

<input v-bind:value="something" v-on:input="something = $event.target.value">

prop动态绑定value值

让组件的 v-model 生效,它必须:

  • 接受一个 value 属性
  • 在有新的 value 时触发 input 事件

(1).在自定义组件上添加v-model

<app-test v-model='par_test'></app-test>
<p>{{par_test}}</p>

(2).组件模板使用v-model进行双向数据绑定,然后$emit事件到外部,从而实现双向绑定。

<template>
<div>
<input type="text" v-model='test' @change="changehandle(test)">
</div>
</template> <script>
export default{
data() {
return{
test:'sc'
}
},
         props:['value'],//接受value属性
methods:{
changehandle:function(test){
console.log(test)
this.$emit('input',test)//触发事件
}
}
         
}
</script>

  

vue日常学习的更多相关文章

  1. vue日常学习(2)

    1.组件学习之内容分发 1.1 作用域插槽 父级 <div class="parent"> <child> <template scope=" ...

  2. vue入门学习(基础篇)

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  3. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  4. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  5. vue.js学习资料

    vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...

  6. 在进行vue的学习,项目中需要引入bootstrap、jquery的步骤。

    在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...

  7. Vue.js学习笔记:在元素 和 template 中使用 v-if 指令

    f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...

  8. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

  9. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

随机推荐

  1. centos7 GNOME 安装微信客户端

    写在前边 最近新装了一个 centos7 GNOME 系统,用了很久了 win,突然转换 linux 桌面版,觉得焕然一新,给搬砖生活增添了一份新意 ~ 先看一下效果图: 怎么弄呢? 下载最新版本 t ...

  2. Python初识对象

    一 楔子 你现在是一家游戏公司的开发人员,现在需要你开发一款叫做<人狗大战>的游戏,你就思考呀,人狗作战,那至少需要2个角色,一个是人, 一个是狗,且人和狗都有不同的技能,比如人拿棍打狗, ...

  3. php批量检测并去除BOM头的代码

    开发中会遇到BOM头, 导致程序无法执行. 浏览器返回接口如下图: 去除BOM头解决方法:<?phpini_set('memory_limit','1024M'); function check ...

  4. 2019.9.27,SAP成都研究院数字创新空间团队建设,射箭和游泳

    2019年9月27日,秋高气爽,SAP成都研究院数字创新团队全体成员又迎来了一次团队建设活动.这次的主题是:射箭. 在正式活动之前,大家先享用了一顿泰式海鲜火锅: 吃饱喝足之后,我们来到了名为&quo ...

  5. IO模型之NIO代码及其实践详解

    一.简介 NIO我们一般认为是New I/O(也是官方的叫法),因为它是相对于老的I/O类库新增的( JDK 1.4中的java.nio.*包中引入新的Java I/O库).但现在都称之为Non-bl ...

  6. VSCode Git 没有活动的源代码控制提供程序

    主要原因:我以前安装的Git只允许在Git-Bash中运行,需要重新安装Git,选择允许三方软件的那个选项,然后安装Git插件,修改git.path即可. 以下是解决过程中的尝试,记录如下,实际上只需 ...

  7. Linux 之 压缩解压缩

    Linux中常见的压缩格式 .zip            .gz             .bz2           .tar.gz      tar.bz2 zip zip格式的压缩文件和win ...

  8. nn.Conv2d 参数及输入输出详解

    Torch.nn.Conv2d(in_channels,out_channels,kernel_size,stride=1,padding=0,dilation=1,groups=1,bias=Tru ...

  9. 安装Windows8/Windows10时,在安装界面提示无法在此驱动器上安装Windows

    该方法会清除整个硬盘上的数据,这是对整个硬盘的操作,如果你有多个硬盘,请一定要选好哪块硬盘,其他的硬盘数据不会被清除. 1.在当前的安装界面按Shift + F10,打开cmd窗口 2.输入diskp ...

  10. Class文件中的常量

    常量池计数器 常量池是class文件中非常重要的结构,它描述着整个class文件的字面量信息. 常量池是由一组constant_pool结构体数组组成的,而数组的大小则由常量池计数器指定. 常量池计数 ...