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 ...
随机推荐
- Statement对象sql注入漏洞的问题
现在通过mysql以及oracle来测试sql注入 漏洞 mysql中的注释# oracle中的注释为-- 所以注入漏洞就产生了 //登录测试 public void login()throw ...
- NHibernate之旅(18)：初探代码生成工具使用
本节内容 引入 代码生成工具 结语 引入 我们花了大量的篇幅介绍了相关NHibernate的知识.一直都是带着大家手动编写代码,首先创建数据库架构.然后编写持久化类和映射文件,最后编写数据操作方法.測 ...
- [GraphQL] Apollo React Query Component
In this lesson I refactor a React component that utilizes the graphql higher-order component to the ...
- android布局中显示隐藏动画
android 在布局中提供属性,能简单的加入动画效果,例如以下: <LinearLayout ... animateLayoutChanges="true" ... /&g ...
- 微软ASP.NET网站部署指南（3）：使用Web.Config文件的Transformations
1. 综述 大多数程序里都会在Web.config里设置參数,而且在部署的时候须要更改. 每次都手工更改这些配置非常乏味,也easy出错. 该章节将会告诉你假设通过自己主动化更新Web.config文 ...
- Android自己定义RatingBar
注意rating_background图片做出来的图片最好和图片四周有一定的空隙.不然会造成图片底部被拉伸的情况. <RatingBar android:layout_width="w ...
- Oracle 单表选择率
听了猫大师的课,对Oracle CBO又加深了一步理解: 单表选择率: selectivity=1/ndv*a4nulls ocard来自dba_tables.num_rows ndv 来自dba_t ...
- C9---include,编译
//main.c //include基本概念 //include是预处理指令,翻译之前会替换,编译之前左的处理,#都是预处理指令,翻译时候会添加别的内容进来. #include <stdio.h ...
- Git 学习笔记（三）
我记得最初学习的时候我提到了使用版本控制软件的最大好处是让你可以永远后悔,那么如何吃后悔药呢?在项目过程中我们很有可能因为各种因素对我们的操作进行回滚,对于传统的版本控制系统来说,并不复杂,拿 SVN ...
- 抓取git的log文件批处理命令示例
@echoset sincedate="2016-04-28 00:00:01" ::变量set beforedate="2016-04-29 00:0 ...