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 ...
随机推荐
- Tensorflow原理通用
使用 TensorFlow, 你必须明白 TensorFlow: 使用图 (graph) 来表示计算任务.在被称之为 会话 (Session) 的上下文 (context) 中执行图.使用 tenso ...
- 微信小程序 全局变量
微信小程序里面有个app.js,我们可以在这个里面设置全局变量, App({ globalData:{ url:"http://xxx.xxx.xx:3000" } }) 在外面就 ...
- 基于【SpringBoot】的微服务【Jenkins】自动化部署
最近,也是抽空整理了一些在工作中积累的经验,通过博客记录下来分享给大家,希望能对大家有所帮助: 一.关于自动化部署 关于自动化部署的优点,我就不在这里赘述了:只要想想手工打包.上传.部署.重启的种种, ...
- Ajax发送XML请求案例
Ajax发送XML请求需求: 根据输入的国家,输出这些国家下面的城市. 如果请求参数较多,而且请求参数的结构关系复杂,则可以考虑发送XML请求.XML请求的实质还是POST请求,只是在发送请求的客户端 ...
- codevs——T1576 最长严格上升子序列
http://codevs.cn/problem/1576/ 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Descr ...
- substring类型题目的解题模板
https://discuss.leetcode.com/topic/30941/here-is-a-10-line-template-that-can-solve-most-substring-pr ...
- Web Service学习-CXF开发Web Service实例demo（一）
Web Service是什么? Web Service不是框架.更甚至不是一种技术. 而是一种跨平台,跨语言的规范 Web Service解决什么问题: 为了解决不同平台,不同语言所编写的应用之间怎样 ...
- 在C 函数中保存状态：registry、reference和upvalues
在C函数中保存状态:registry.reference和upvalues C函数能够通过堆栈来和Lua交换数据,但有时候C函数须要在函数体的作用域之外保存某些Lua数据.那么我们想到全局变 ...
- Project Euler：Problem 37 Truncatable primes
The number 3797 has an interesting property. Being prime itself, it is possible to continuously remo ...
- nyoj--95--众数问题（水题）
众数问题 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 所谓众数,就是对于给定的含有N个元素的多重集合,每个元素在S中出现次数最多的成为该元素的重数, 多重集合S重的重 ...