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 ...
随机推荐
- 2018年九个很受欢迎的vue前端UI框架
最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...
- Mybatis拦截器执行过程解析
上一篇文章 Mybatis拦截器之数据加密解密 介绍了 Mybatis 拦截器的简单使用,这篇文章将透彻的分析 Mybatis 是怎样发现拦截器以及调用拦截器的 intercept 方法的 小伙伴先按 ...
- C#中的Dynamic
dynamic dyn = (dynamic)1; int j = (int)dyn; 可以看到1被强制转换成dynamic,然后又被强制转换回int. 然而dynamic可以隐式的转换成任何类型,并 ...
- E - QS Network
E - QS Network 思路:最小生成树,数组不要开小了. #include<cstdio> #include<cstring> #include<iostream ...
- MQ发送定时消息
通过延时发送来发送定时消息. RocketMQ只支持固定精度时间的延时消息发送:1s 5s 10s 30s 1m 2m 3m 4m 5m 6m 7m 8m 9m 10m 20m 30m 1h 2h 若 ...
- iOS_第3方类库MBprogressHUD
1,将下载好的第3方类库MBprogressHUD源代码包增加到project(事实上就是一个.h和.m文件) 2,进入project的Build Phases,将源代码包里面的所有.m文件所有加入到 ...
- 非Qt工程使用Qt的信号槽机制
非Qt工程,使用Qt的信号槽机制,蛋疼不?反正我现在就是要做这样一件蛋疼的事. 要使用Qt的信号槽机制,下面是从Qt Assist里面关于 signal & slots 的一句介绍: All ...
- gdb help all 帮助信息
Command class: aliases ni -- Step one instruction rc -- Continue program being debugged but run it i ...
- listView 多个item布局
package kds.szkingdom.wo.android.adapter; import java.util.List; import android.content.Context; imp ...
- Windows系统安装MySQL5.5.21图解教程
大家都知道MySQL是一款中.小型关系型数据库管理系统,很具有实用性,对于我们学习很多技术都有帮助 数据库是5.5.21这个版本的.以下是安装步骤: 1.首先单击MySQL5.5.21的安装文件,出现 ...