vue 父组件给子组件传值
vue中父组件给子组件传值
（一）事件传值
事件传值在我理解也可以是父元素调用子元素的函数，背景是，当页面元素有多个对话框，恰好每一个对话框又是一个子元素，父元素中某些按钮控制对应的子元素对话框的开和关。
父组件：
<div style="background-col:#ccc;width:30px;height:30px;border:1px solid #ccc" @click="parentMethod">
<addwebsite ref="child1"></addwebsite> //子组件写ref
</div>
import addwebsite from './addwebsite' //引入子组件
data() {
return {
flag:true //定义一个flag
}
}
components: {
addwebsite
}
methods:{
parentMethod() {
console.log(this.$refs.child1) //返回的是一个vue对象，所以可以直接调用其方法
this.$refs.child1.childMethod(this.flag) //调用子组件的函数，并把这个状态传过去。
}
}
子组件：
<template>
<div>
<Modal
v-model="modal1"
title="Common Modal dialog box title"
@on-ok="ok"
@on-cancel="cancel">
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
</Modal>
</div>
</template>
上面的就是对话框 v-model绑定的值可以控制对话框的开或者关
<script>
export default {
data () {
return {
modal1: false //对话框的初始值，也就是初始开关的状态
}
},
methods:{
childMethod(flag) { //这个就是子组件的函数 参数是父组件调用时传过来的
this.modal1 = flag; //将这个状态赋给当前的对话框所绑定data数据上
}
},
}
</script>
(二)属性传值
父组件：
<div id='app'>
<com1 :parentmsg="msg"></com1> //parentmsg 自定义一个属性来存放值
</div>
import com1 from './com1'
data:{
msg:'123-我是父组件中的数据' //父组件要向子组件传的数据
},
子组件：
首先
export default {
props:['parentmsg'] //子组件接收，也可以写成props:{parentmsg：数据类型(string等),required:true}
}
<span>{{parentmsg}}</span> //子组件使用该值
vue 父组件给子组件传值相关推荐
- vue 父链和子组件索引_vuejs填坑-父子组件之间的访问
有时候我们需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 1. 父组件访问子组件 $children或$ref $children 返回所有子组件的实例,是一个数组 显示两个组件的信 ...
- vue 父链和子组件索引_解决Vue2.x父组件与子组件之间的双向绑定问题
最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex, ...
- vue 父链和子组件索引_vue子组件和父组件双向绑定的几种方案
v-model案例 模仿v-model实现案例 我是一串要和内部名字联动的一串文字(父组件) 父组件改变值带动(父组件)点一下试试 .sync方案实现案例 这是父组件的东西.利用这个框改变值,看看有没 ...
- vue 父链和子组件索引_Vue.js 学习笔记 第7章 组件详解
组件(Component)是Vue.js最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的. 本章将带领你由浅入深地学习组件的全部内容,并通过几个实战项目熟练使用Vue组件. 7.1 组件 ...
- 父组件给子组件传值方法_【Vue】小学生都能看懂的子父组件传值
Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,其中之一就是组件的传值. 搭建的框架目录结构 一.父传子动图效果及源码 父传子源码: 父组件: 子组件: 二.子传父动 ...
- 【Vue】父子组件的传值（父组件--＞子组件、子组件--＞父组件）
父组件传值给子组件 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- （25）Vue.js组件通信—父组件向子组件传值
一.Vue.js组件通信介绍 子组件如何获取父组件中的数据?父组件如何得知子组件的数据变更?如果是更加复杂的组件关系呢?在组件间传递数据的操作,称为组件通信. 二.Vue.js组件通信内容 • 父组件 ...
- Vue.js（8）- 父组件给子组件传值
父组件给子组件传值原理:属性绑定 第一步:建立连接 B.vue <template><div><h3>这是B.vue文件内容</h3><h4> ...
- Vue组件（二）父组件、子组件通信/传值
一.Vue 父组件访问子组件 1.父组件获取子组件对象 通过ref引用属性访问子组件对象 定义: <StudentInfo :num="parentNum" ref=&quo ...
最新文章
- Spark入门系列（二）| 1小时学会RDD编程
- powershell
- sql 拆分_实践参考：MySQL架构设计从开发规范、选型、拆分到减压实战指南
- MySQL+create+base,MySQL中CREATE DATABASE和CREATE SCHEMA的区别
- php mysql修复_php简单备份与还原MySql的方法 | 瑕疵学院 – 学习无瑕疵，成就有保障...
- iOS开发中那些高效常用的宏
- ARKit玩起来 - AR预览唱片-史小川-专题视频课程
- A870省电内核超频内核介绍及下载[七夕]
- 基于WTN6040F-8S语音芯片ic在助眠耳机产品的设计解决方案
- PCB会过期？过期后先烘烤？
- python抢购软件/插件/脚本附完整源码
- win10联想软件商店壁纸的保存目录在哪
- pages.json tabBar[‘list‘][2][‘pagePath‘] “pages/contact/contect“ 需在 pages 数组中
- 静态变量和静态方法编程训练—信用卡消费记录
- 免费基金股票接口大全，macd，kdj，cci，威廉指标，神奇九转大全
- 响应式编程android,Android响应式编程（一）RxJava[入门基础]
- 计算机技术在口腔医学中的应用研究,计算机技术在口腔医学的运用.docx
- matlap求系统的稳态响应
- 简单爬取wallpaper heaven高清壁纸（福利满满~）
- 环信为自己的app加入即时通信功能的流程