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. Effective Java 读书笔记(四):泛型

    1 不要使用原始类型 (1)术语 术语 例子 参数化类型(Parameterized type) List<String> 实际类型参数(Actual type parameter) St ...

  2. React 脚手架支持Typescript和Sass

    首先,创建React工程目录,以及选择Typescript版本 进入在my-app目录,安装node-sass 然后再安装webpack的sass-loader  接下来进入node_modules ...

  3. python列表操作大全

    Python列表操作大全 对于python列表的理解可以和C语言里面的数组进行比较性的记忆与对照,它们比较相似,对于python里面列表的定义可以直接用方括号里加所包含对象的方法,并且python的列 ...

  4. 二、openfeign生成并调用客户端动态代理对象

    所有文章 https://www.cnblogs.com/lay2017/p/11908715.html 正文 上一篇文章中,我们了解到了@FeignClient注解的接口被扫描到以后,会生成一个Fe ...

  5. Java 之 Properties类 属性集

    一.概述 java.util.Properties集合 extends Hashtable<k,v> implements Map<k,v> java.util.Propert ...

  6. Spring Boot 揭秘与实战之RabbitMQ

    Spring Boot 整合 RabbitMQ Spring Boot 整合 RabbitMQ 是非常容易,只需要两个步骤. 首先,在 pom.xml 中增加 RabbitMQ 依赖. <dep ...

  7. javascript_06-控制流程

    流程控制 程序的三种基本结构 顺序结构 选择结构 循环结构 判断语句 if 语法: if(condition){ //todo }else if{ //todo }else{ //todo } var ...

  8. CSS之简介及引入方式

    一.css的来源 1994年哈坤·利提出了CSS的最初建议.而当时伯特·波斯(Bert Bos)正在设计一个名为Argo的浏览器,于是他们决定一起设计CSS.其实当时在互联网界已经有过一些统一样式表语 ...

  9. Bash基础——Shell脚本内部常用环境变量

    $@和$*区别 不加引号的时候没区别 #! /usr/bin/bash function print_args_at { printf "%s\n" $@ echo $@ } fu ...

  10. CommandLineParse类(命令行解析类)

    https://blog.csdn.net/jkhere/article/details/8674019 https://sophia0130.github.io/2018/05/08/Command ...