vue 父链和子组件索引_vue子组件和父组件双向绑定的几种方案
v-model案例
模仿v-model实现案例
我是一串要和内部名字联动的一串文字(父组件)
.sync方案实现案例
// v-model方案 你写上一个v-model的时候其实就是自动监听了input事件并且把取到的值赋值给当前值.
Vue.component('new-input', {
props: ['value'],
data: function() {
return {}
},
template: '是个好人：',
methods: {},
computed: {
newName: {
get() {
return this.value;
},
set(value) {
this.$emit('input', value);
}
}
}
});
// 模拟v-model 他的意义在于没有里边没有input框也想实现这种,用在组件需要显示关闭的时候比较方便
// 这个意义重大.
Vue.component('two-model', {
props: ['show'],
data: function() {
return {
}
},
template: '
Army-海军(子组件)
',
methods: {
toggleShow() {
this.nameShow =!this.nameShow
}
},
computed: {
nameShow: {
get() {
return this.show;
},
set(value) {
this.$emit('input', value);
}
}
}
});
// 这里必须监听这个 update:name这个事件这个时候才能这样子写:name.sync="name"
// 同时要加上在子组件里监听这个变量.否则只能子组件改变父组件,不能双向绑定
// 还是用v-model更好理解和方便些吧
Vue.component('three-input', {
props: ['name'],
data: function() {
return {
newName: this.name
}
},
template: ' 你的名字：',
methods: {
changeInput(val) {
this.$emit("update:name", this.newName);
}
},
computed: {},
watch: {
name() {
this.newName = this.name;
}
}
});
new Vue({
el: '#app',
data: {
name: 'Army-海军',
showName: true
},
methods: {
getNewName: function(newName) {
this.name = newName;
},
changeShowName(val) {
this.showName = val;
},
toggleShowName() {
this.showName = ! this.showName
}
}
});
直接复制到自己页面去测试即可。代码是最好读的。
vue 父链和子组件索引_vue子组件和父组件双向绑定的几种方案相关推荐
- Vue父组件访问子组件属性和方法、父子组件双向绑定（两种方法）
Vue父组件访问子组件属性和方法.父子组件双向绑定(两种方法) 1. 使用vue-cli创建项目 目录结构如下图: 2. 编写代码 src/components/HelloWorld.vue < ...
- vue 父链和子组件索引_解决Vue2.x父组件与子组件之间的双向绑定问题
最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex, ...
- angular移除事件绑定事件绑定_Vue.js子组件利用事件向父组件传输数据，以及sync修饰符和双向绑定...
在Vue.js的组件中,prop是"单向绑定"的,数据只能从父组件传输到子组件.Vue文档中的说了这样做的原因: 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑 ...
- Vue 中实现双向绑定的 4 种方法
1. v-model 指令 <input v-model="text" /> 复制代码 上例不过是一个语法糖,展开来是: <input:value="t ...
- Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录 一.VueJS是什么? 二.Vue的优缺点 三.MVVM 数据双向绑定 四.Vue的安装和使用 五.Vue模板语法-文本渲染 六.常用的vue的指令 一.VueJS是什么? 它是一个轻量级MVV ...
- vue 父链和子组件索引_Vue.js 学习笔记 第7章 组件详解
组件(Component)是Vue.js最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的. 本章将带领你由浅入深地学习组件的全部内容,并通过几个实战项目熟练使用Vue组件. 7.1 组件 ...
- mysql嵌套子查询索引_SQL 子查询，索引优化
场景 索引优化 单列索引 多列索引 索引覆盖 排序 场景 我用的数据库是mysql5.6,下面简单的介绍下场景 课程表 create table Course( c_id int PRIMARY KE ...
- VUE如何提交Table数据（解决相同属性多条数据不能双向绑定的问题）
类似这样的: 解决方案:用数组形式提交 使用v-for来遍历渲染,提交过去的就已经是每行的值组成数组 1.前端代码 <table class="table"><t ...
- vue实现组件双向绑定
// test.vue<template><div><input v-model="val"><testComponent v-model ...
最新文章
- 智能驾驶操作系统OS
- css折叠样式（1）——使用css样式的三种方式
- module是什么类型_nodejs中module.exports和exports的区别
- 原生态的ajax 及json和gson学习资源
- verilog基础篇RAM IP核的使用
- SQL总结(快速参考)
- CSS布局教程：用DIV CSS实现国内经典式三行两列布局-CSS布局实例
- c++ 不插入重复元素但也不排序_面试时写不出排序算法？看这篇就够了
- 调整PowerDesigner各种字体大小
- 618电商大促 到底谁家赢了？大家都这么有钱的吗？
- Ubuntu如何定时清理内存
- mac 安装redis 视频教程
- 组件实例对象与Vue实例对象
- 八位颜色代码查询_RGB颜色代码全表
- 【美图秀秀】如何P图恶搞——室友的噩梦
- AD域控与ISA防火墙控制上网
- linux 开发c工具箱,利用Windows10的Linux子系统搭建gcc/g++开发环境
- 理解 Python 中的装饰器
- （五十二）：多模态情感分析研究综述_张亚洲
- OpenGL 纹理基础与索引