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. Python之(scikit-learn)机器学习

    一.机器学习(Machine Learning, ML)是一门多领域交叉学科,涉及概率论.统计学.逼近论.凸分析.算法复杂度理论等多门学科.专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或 ...

  2. 区块链公链分片技术(sharding)方案思维导图

  3. base64码通过http传输 +号变 空格 以及 图片编码后字符串较长导致POST提交失败 问题解决

    场景:图片上传OSS存储,接口拿字符串去接前端传的base64码,服务器打印入参传的值,发现和前端打印的值有所区别,服务器中打印的值所有+号全部变成空格. 解决办法: Java中使用:url = ur ...

  4. Computer Vision_33_SIFT:An efficient SIFT-based mode-seeking algorithm for sub-pixel registration of remotely sensed images——2015

    此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...

  5. python接口自动化1-requests-html支持JavaScript渲染页面

    前言 requests虽好,但有个遗憾,它无法加载JavaScript,当访问一个url地址的时候,不能像selenium一样渲染整个html页面出来.requests-html终于可以支持JavaS ...

  6. 记录java+testng运行selenium(一)

    整体的流程为下图 整体思路为: 1. 由程序开始运行时去读取ini文件中存储的浏览器及需要打开的url 2. test运行时通过description实现数据驱动,主要做两件事 2.1 第一件事为:读 ...

  7. SUSE Ceph Cephfs - Storage6

    (1)Policy 配置文件,添加MDS角色定义 # vim /srv/pillar/ceph/proposals/policy.cfg # MDS role-mds/cluster/mds*.sls ...

  8. Linux:入门基础

    一.操作Linux必知必会基础知识 二.在Linux命令下查看命令帮助信息 三.Linux挂机重启注销命令 四.Linux显示系统IP地址 一.操作Linux必知必会基础知识 1.Linux命令行组成 ...

  9. RT-Thread--内核移植

    内核移植 内核移植就是指将 RT-Thread 内核在不同的芯片架构.不同的板卡上运行起来,能够具备线程管理和调度,内存管理,线程间同步和通信.定时器管理等功能.移植可分为 CPU 架构移植和 BSP ...

  10. maya pymel cmds ls 列出未知节点 unknown nodes

    maya pymel cmds ls 列出未知节点 unknown nodes cmds.ls(type = 'unknown',fl = 1)