vue父子组件之间的传值
引入组件
父组件
<div>
<form-edit></form-edit>
</div>
import FormEdit from "路径" //引入
export default {
name: "HelloWorld",
components:{
FormEdit
},
data(){
return{
}
}
}
子组件
<template>
<div>{{ change}}</div>
</template>
export default {
name: "child",
data(){
return{
change:123
}
}
}
父组件 --> 子组件
父组件
<div>
<child v-bind:change="str"></child>
</div>
export default {
name: "HelloWorld",
data(){
return{
str: '123' //str可以是对象,数组等
}
}
}
子组件
<template>
<div>{{ change}}</div>
</template>
export default {
name: "child",
props:["change"],
data(){
return{
console.log(this.change)
}
}
}
子组件 --> 父组件
父组件
<div>
<child v-on:add="ok"></child>
</div>
export default {
name: "HelloWorld",
data(){
return{
}
},
methods:{
ok:function(param){} //param子组件传过来的值
}
}
子组件
<template>
<div @click="dian">我是子组件</div>
</template>
export default {
name: "child",
data(){
return{
str:'123'
}
},
methods:{
dian(){
this.$emit("add",str)//第一个值为父组件绑定的属性,第二个值为要传的值
}
}
}
vue父子组件之间的传值的更多相关文章
- 浅谈vue父子组件之间的传值
前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热.Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1.父组件向 ...
- VUE 父子组件之间通信传值 props和 $emit
1.父组件传值给子组件 $props,子组件传值给父组件 $emit 父组件 <div id="app" > <tr ...
- vue父子组件之间相互传值
1. 子组件使用父组件方法,并向父组件传值 子组件代码 <template> <div class="menu"> <div class=" ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue项目中的父子组件之间的传值。
首先说一下父子组件就是在一个vue文件中引入另一个vue文件,被引入vue文件就是子组件,引入vue文件的vue文件就是父组件.而在父组件中是不能直接调用子组件中的变量值的.下面详细说一下,父子组件之 ...
- vue 非父子组件之间的传值(Bus/总线/发布订阅模式/观察者模式)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue组件定义方式,vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- vue学习--组件之间的传值方式
1.概述 vue由多个组件构成页面,在不同的组件中有不同的联系,组件之间的传值是十分有必要的 2.父子组件之间传值 --props和$emit 父传子:通过props 方法:子组件:props:['m ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
随机推荐
- css取消双击选中文字
在我们在写前端页面的时候,由于手速过快(当然这都是指的老司机),会经常双击,浏览器就会默认选中你双击的文本,这种感觉有点不太好. 这个时候就用到了 user-select:none; 属性. 因为存在 ...
- CentOS6.5(3)----设置自己安装的程序开机自动启动
CentOS6.5系统下设置自己安装的程序开机自动启动 方法1. 把启动程序的命令添加到 /etc/rc.d/rc.local 文件中,比如设置开机启动 mysqld: #!/bin/sh # # T ...
- MyBatis学习笔记(一)
测试Demo的目录结构: com.luohao.config ->MyBatisCongfig.xml ->userMapper.xml com.luohao.Test ->Test ...
- MyBatis基本配置和实践(四)
一.Mybatis整合spring 1.整合思路 SqlSessionFactory对象应该放到spring容器中作为单例存在. 传统dao的开发方式中,应该从spring容器中获得sqlsessio ...
- 了解 Azure VM 的系统重启
有时 Azure 虚拟机 (VM) 可能重启,即使没有明显原因,也没有证据表明用户发起重启操作. 本文列出了可导致 VM 重启的操作和事件,并针对如何避免意外重启问题或减少该问题影响提供见解. 配置 ...
- es6常见特性
Parameters(参数) in ES6 Template Literals (模板文本)in ES6 Multi-line Strings (多行字符串)in ES6 Destructuring ...
- Exchange 2016 CU6 安装后,发生错误 出现意外错误,无法处理您的请求
公司的Exchange2016环境准备上线了,今天owa打不开了.出现如下图的错误,更多详细信息没有截图,但最关键的一句记下来了. X-OWA-Error Microsoft.Exchange.Dia ...
- 计算机应用基础教程作业flash动画 车辆工程 冯大昕
- 小白学CMD下运行MySQL
将mysql目录下bin目录中的mysql.exe放到C:\WINDOWS下,可以执行以下命令 连接:mysql -h主机地址 -u用户名 -p用户密码 (注:u与root可以不用加空格,其它也一样) ...
- css属性之flex属性
flex属性 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间.是一个简写属性,可以同时设置flex-grow, flex-shrink, flex-basis三个子属性. /* Basic ...