Vue父子组件之间的通讯（学习笔记）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<cheng :k="h1s" @ch="ch"></cheng>
</div>
</body>
<script src="vue.js"></script>
<script>
/*
说明：在子组件里面通过prpos接收到父组件传的值是不能改变的，不过可以自己定义一个变量来赋值改变，如果想要改变数据源的话必须通过$emit来进行事件发布
1、父组件给子组件传值：
props传递参数
父组件 -> 子组件传参
在使用子组件标签的时候，写在行间
:key="数据"
key值是子组件规定
本案例：
父组件定义h1s的数据 通过:k 传递给子组件
子组件通过props来接收，required:true是定义的规则，也可以使用数组来接收，这样就不会有任何规则 2、子组件给父组件通讯
父组件关心子组件某个状态的改变、事件的发生
组件 -> 父组件
子组件中发布一个事件，
this.$emit()
本案例：
子组件定义一个事件，通过this.$emit('ch',"我改变了标题")来定义和父组件的通讯关系。
父组件接收子组件传过来的事件ch 然后@ch='父组件自定义函数'
this.$emit('ch',"我改变了标题")里面的ch是定义好给父组件传递的事件，'我改变了标题'是传递的参数
*/ new Vue({
el:"#app",
data:{
h1s:'我是一个标题',
arr:[
{
title:"新闻",
list:['新闻1','新闻2']
},
{
title:"体育",
list:['体育1','体育2']
},
]
},
methods:{
ch(value){
console.log("子组件发布事件，父组件接收了",value)
this.h1s = value
}
},
components:{
"cheng":{
props:{
k:{
type:String,
required:true
}
},
data(){
return {
a:""
}
},
template:`
<div>
<h1>{{k}}</h1>
<button @click="changes">按钮</button>
</div>
`,
methods:{
changes(){
console.log("子组件事件")
this.$emit('ch',"我改变了标题")
}
}
}
}
})
</script>
</html>
Vue父子组件之间的通讯（学习笔记）的更多相关文章
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- 浅谈vue父子组件之间的传值
前言:本章主要说下父子组件的传值,为商品列表组件之间的传值做一个基础预热.Github:https://github.com/Ewall1106/mall(请选择分支chapter23) 1.父组件向 ...
- vue父子组件之间传值
vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...
- vue.js组件之间的通讯-----父亲向儿子传递数据，儿子接收父亲的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue父子组件之间的相互通信
组件是Vue知识体系中最重要的一部分之一,父子组件由于作用域的不同,无法直接对对方的数据进行操作.它们之间的数据传递都是通过中间介质进行的,父组件给子组件传值是通过props属性,而子组件给父组件传值 ...
- VUE 父子组件之间通信传值 props和 $emit
1.父组件传值给子组件 $props,子组件传值给父组件 $emit 父组件 <div id="app" > <tr ...
- vue父子组件之间互相获取data值&调用方法（非props）
vue 子组件调用父组件方法&数据 vue有$parent这么一个属性,在子组件中就能拿到父组件的数据 this.$parent.xxx 就能调用父组件的方法 this.$parent.xxx ...
- vue父子组件之间的通信
利用props在子组件接受父组件传过来的值1.父组件parentComp.vue <template> <childComp :fromParentToChild="fro ...
- Vue父子组件之间通信
1.父 -> 子.通过props //father.vue <template> <div id="father"> <div><l ...
随机推荐
- 关于mvc架构的浅谈
MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码 ...
- UVA11752 The Super Powers
/* UVA11752 The Super Powers https://vjudge.net/contest/153365#problem/Y 数论 注意a^n=b要用除法求,并且求得的n比实际大1 ...
- 判断webservice是否可用
在.net中验证WebService的Url有效并且验证服务可用: 需要用到win32下的组件,比如Microsoft XML, v5.0 测试程序具体如下:建一个项目,在你的引用中添加COM---找 ...
- HDU——T1231 最大连续子序列
http://acm.hdu.edu.cn/showproblem.php?pid=1231 Problem Description 给定K个整数的序列{ N1, N2, ..., NK },其任意连 ...
- APP为什么签名，使用keytool jarsigner进行签名
签名(sign):在应用程序的特定字段写入特定的标记信息,表示该软件已经通过了签署者的审核.过程:使用私有密钥数字地签署一个给定的应用程序 作用: 识别应用程序作者 检測应用程序是否发生改变 有种程序 ...
- 【云快讯】之四十八《IBM和Cisco最新收购，加强Openstack易用能力》
2015-06-08 张晓东 东方云洞察 点击上面的链接文字,能够高速关注"东方云洞察"公众号 本周宣布的两起收购引人注意.思科购买Piston云计算公司.同期IBM的收购Blue ...
- 为什么网络银行不支持GNU/Linux操作系统下的浏览器操作
当年Linux没出时.银行就開始信息化建设了. 所为信息化,就是指用计算机工作了.服务客户了. 顺带着,慢慢的建server,连网(内部网).外网(网上银行) 这样下来, unix, dos, win ...
- DPI深度报文检测架构及关键技术实现
DPI深度报文检测架构及关键技术实现 当前DPI(Deep Packet Inspect深度报文识别)技术是安全领域的关键技术点之一,围绕DPI技术衍生出的安全产品类型也非常的多样.在分析DPI的进一 ...
- caffe训练CIFAR数据库
CIFAR-10是一个用于普适物体识别的数据集.Cifar-10由60000张32*32的RGB彩色图片构成,50000张训练图片,10000张测试图片,分为10类.cifar下载地址: http:/ ...
- luogu 1593 因子和
因子和 题目描述 输入两个正整数a和b,求\(a^b\)的因子和.结果太大,只要输出它对9901的余数. 解法 基本算数定理,每一个数都可以被分解成一系列的素数的乘积,然后你可以分解出因数了. 如何求 ...