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 ...
随机推荐
- EasyUI闪屏,EasyUI页面加载提示:原理+代码+效果图
使用EasyUI时,有个经常遇到的问题,页面还没有渲染完成的时候,就展现了. 刚刚开始很混乱,等加载完成后,就好了. 参考这篇文章http://blog.csdn.net/zheng0518/arti ...
- linux网络监控脚本
http://www.51testing.com/html/92/77492-828434.html
- BA-WG-泰豪发电机
泰豪发电机的控制主板有2个端口,一个是RS232端口,一个是RS485端口,通常接网关需要将这个RS485的端口调整为modbus协议输出,再将modbus协议通过网关转换为bacnet / ip协议 ...
- [SharePoint][SharePoint Designer 入门经典]Chapter13 客户端JavaScript编程
1.创建客户对象模型的页面 2.使用CAML从SPS中取得数据 3.创建更新删除列表项目 4.为ribbon添加项目
- HDU 4357
这道题写起来没难度,但这种题确实很难,这种字符串的题难在证明.以后也要注意. 奇偶性不同的字符串肯定不能转换,因为每一次交换都是字符串的和增加2. 当字符串长度为2时,可以模拟交换,最多26次. 否则 ...
- HDU 1171 Big Event in HDU（多重背包）
Big Event in HDU Problem Description Nowadays, we all know that Computer College is the biggest depa ...
- scikit-learn系列之如何存储和导入机器学习模型
scikit-learn系列之如何存储和导入机器学习模型 如何存储和导入机器学习模型 找到一个准确的机器学习模型,你的项目并没有完成.本文中你将学习如何使用scikit-learn来存储和导入机器 ...
- 使用CNN做文本分类——将图像2维卷积换成1维
使用CNN做文本分类 from __future__ import division, print_function, absolute_import import tensorflow as tf ...
- C# 遍历文件夹及子目录下所有图片.
要求:取指定目录下面的所有图片,以表格的型式展示并显示该图片的相对路径. 服务端代码: public partial class ViewIcon : System.Web.UI.Page { JAr ...
- ROS-SLAM仿真-hector
前言:hector_slam可以很好的在空中机器人,手持构图设备及特种机器人中运行. hector_slam不需要订阅里程计信息/odmo消息,而是直接使用激光估算里程计信息,因此,当机器人速度较快时 ...