vue-自定义组件传值的实例讲解


Posted in Javascript onSeptember 18, 2018

项目中,我们经常会遇到自定义组件传值的问题,方法很多种,但是原理很简单,下述文档总结实际项目中使用的传值方式。

父组件传递给子组件某一值,子组件内会修改该值,然后父组件需要获取新值

在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop给子组件下发数据,子组件通过事件给父组件发送消息。

自定义组件传值

vue-自定义组件传值的实例讲解

常规prop-event

父组件

<prop-event-value :address="address" @update="val => address = val" key="4"></prop-event-value>

<script>
import propEventValue from './components/prop-event-value.vue'
export default {
 name: 'app',
 components: {
 propEventValue
 },
 data() {
 return {
  address: ''
 }
 }
}
</script>

子组件

<template>
 <div>
  <p>prop-event</p>
  <label for="address">地址</label>
  <input type="text" id="address" v-model="tempAddress">
 </div>
</template>

<script>
 export default {
 name: 'prop-event',
 props: ['address'],
 data() {
  return {
  tempAddress: this.address
  }
 },
 watch: {
  tempAddress(newVal) {
  this.$emit('update', newVal)
  }
 }
 }
</script>

需要注意:不要直接在子组件内操作父组件的内容

组件实例的作用域是孤立的。每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。如果你这么做了,Vue 会在控制台给出警告。

export default {
 name: 'prop-event',
 props: ['address'],
 watch: {
 address(newVal) {
  this.$emit('update', newVal)
 }
 }
}

如将上述代码替换子组件,内容会报错!

vue-自定义组件传值的实例讲解

修饰符.sync

父组件

<my-sync-value :address.sync="address" key="5"></my-sync-value>

<script>
import mySyncValue from './components/my-sync-value.vue'
export default {
 name: 'app',
 components: {
 mySyncValue
 },
 data() {
 return {
  address: ''
 }
 }
}
</script>

子组件

<template>
 <div>
 <p>my-sync</p>
 <label for="address">地址</label>
 <input type="text" id="address" v-model="tempAddress">
 </div>
</template>

<script>
 export default {
 name: 'my-sync',
 props: ['address'],
 data() {
  return {
  tempAddress: this.address
  }
 },
 watch: {
  tempAddress(newVal) {
  // 必须是这个update:address
  this.$emit('update:address', newVal)
  }
 }
 }
</script>

prop-update:[prop]语法糖,与prop-event对比的优势:父组件无需监听事件@update="val => address = val",自动监听update:[prop]事件。

双向数据绑定v-model

所以要让组件的 v-model 生效,它应该 (从 2.2.0 起是可配置的):

接受一个 value prop

在有新的值时触发 input 事件并将新值作为参数

父组件

<my-vmodel-value v-model="address" key="6"></my-vmodel-value>

<script>
import myVmodelValue from './components/my-vmodel-value.vue'
export default {
 name: 'app',
 components: {
 myVmodelValue
 },
 data() {
 return {
  address: ''
 }
 }
}
</script>

子组件

<template>
 <div>
 <p>my-vmodel</p>
 <label for="address">姓名</label>
 <input type="text" id="address" v-model="tempAddress">
 </div>
</template>

<script>
 export default {
 name: 'my-vmodel',
 props: ['value'],
 data() {
  return {
  tempAddress: this.value
  }
 },
 watch: {
  tempAddress(newVal) {
  // 必须是input
  this.$emit('input', newVal)
  }
 }
 }
</script>

prop-input语法糖,父组件v-model默认监听input事件

需要注意,这里必须触发input事件,当然也可以自定v-model属性值和事件,请参照自定义组件的v-model

vuex

通过store传值,这里后续单独讲述vuex。

单向数据流

上述已经提及,在子组件内部改变 prop,Vue会在控制台给出告警。但经常开发周静,我们很容易忍不住修改prop中的数据,如:

Prop 作为初始值传入后,子组件想把它当作局部数据来用;

Prop 作为原始数据传入,由子组件处理成其它数据输出。

对这两种情况,正确的应对方式是:

问题1:定义一个局部变量,并用 prop 的值初始化它:

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

问题2:定义一个计算属性,处理 prop 的值并返回:

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

特别需要注意:在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态。

以上这篇vue-自定义组件传值的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 面试题随笔
Mar 31 Javascript
jquery中获取元素的几种方式小结
Jul 05 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
关于vue单文件中引用路径的处理方法
Jan 08 Javascript
Angular4.0动画操作实例详解
May 10 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 Javascript
vuex actions传递多参数的处理方法
Sep 18 #Javascript
微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤
Sep 18 #Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
Sep 18 #Javascript
Vue中 key keep-alive的实现原理
Sep 18 #Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 #Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 #Javascript
vue服务端渲染添加缓存的方法
Sep 18 #Javascript
You might like
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
JavaScript实现信用卡校验方法
2015/04/07 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
fullPage.js和CSS3实现全屏滚动效果
2017/05/05 Javascript
js简易版购物车功能
2017/06/17 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
2018/11/30 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
python使用Image处理图片常用技巧分析
2015/06/01 Python
python使用mysql数据库示例代码
2017/05/21 Python
python flask实现分页效果
2017/06/27 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
python中调试或排错的五种方法示例
2019/09/12 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Python selenium爬取微信公众号文章代码详解
2020/08/12 Python
HTML5中的新元素介绍
2008/10/17 HTML / CSS
毕业生自我鉴定范文
2013/11/08 职场文书
房地产融资计划书
2014/01/10 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
文明工地标语
2014/06/16 职场文书
经典禁毒标语
2014/06/16 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
春节慰问信范文
2015/02/15 职场文书
海洋天堂观后感
2015/06/05 职场文书