TZ_16_Vue父子组件之间的通信
1.父向子传递props，该如何传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--父在 app 中拿到数据发送给儿子 -->
<lcoal v-bind:title="msg"></lcoal>
<lcoal1 v-bind:items="lession"></lcoal1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
//局部组件
const lcoal = {
template: "<h1>{{title}}</h1>",
//拿到父传递过来的数据 名字必须相同 放到组件中进行渲染
props: ['title']
};
const lcoal1= {
template: "<ul><li v-for='item in items'>{{item}}</li></ul>",
//拿到父传递过来的数据 名字必须相同 放到组件中进行渲染
//props: ['items']
props:{
items:{
//传递的数据必须是数组类型的
type:Array,
//如果没有传递数据过来默认使用的数据
default:['java']
}
}
};
const app = new Vue({
el: "#app",
data: {
msg: "大家好！",
lession:['java','php','python']
},
components: {
lcoal,
lcoal1
}
})
</script>
</body>
</html>
2.单机子的增加方法，不能直接修改父属性里面的值，需要父自己修改属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<h2>num: {{num}}</h2>
<counter v-bind:count="num":inc="increment" v-on:dec="decrement"></counter>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component("counter", {
template:`
<div>
<button @click="plus">加</button>
<button @click="reduce">减</button>
</div>`,
props:['count'],
methods:{
plus(){
this.$emit("inc");
},
reduce(){
this.$emit("dec");
}
}
})
var app = new Vue({
el:"#app",
data:{
num:0
},
methods:{ // 父组件中定义操作num的方法
increment(){
this.num++;
},
decrement(){
this.num--;
}
}
})
</script> </body>
</html>
TZ_16_Vue父子组件之间的通信的更多相关文章
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- React 学习(六) ---- 父子组件之间的通信
当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件 ...
- vue2.0 父子组件之间的通信问题
概要: 父组件向子组件通信:props属性 子组件向父组件通信:$emit()触发事件,$on()监听事件 在 vue 1.0 中可以使用$dispatch 和 $broadcast来实现 向上派发事 ...
- vue父子组件之间的通信
利用props在子组件接受父组件传过来的值1.父组件parentComp.vue <template> <childComp :fromParentToChild="fro ...
- vue非父子组件之间的通信
https://www.cnblogs.com/chengduxiaoc/p/7099552.html //vm.$emit( event, arg ) //触发当前实例上的事件 //vm.$on ...
- vue2.0中父子组件之间的通信总结
父组件: 子组件: 接受父组件的信息: 向父组件发送事件: (其中slot是插槽,可以将父组件中的<p>123</p>插入进来,如果父组件没有插入的内容,则显示slot内部的内 ...
- vue框架组件之父子组件之间的通信
1.如图看解说: 你子标签要给我父标签传递信息,你总得有个触发机制告诉我这是怎么回事对吧 要不我怎么知道你要传数据给我呢!
- Vue 组件&组件之间的通信 父子组件的通信
在Vue的组件内也可以定义组件,这种关系成为父子组件的关系: 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是: Vue ...
- vue组件之间的通信，父子之间的数据通信
父子组件之间的通信问题既可以传递数据也可以传递变量,父组件传递数据给子组件可以使用props,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...
随机推荐
- Python 字符串切片(slice)
切片操作(slice)可以从一个字符串中获取子字符串(字符串的一部分).我们使用一对方括号.起始偏移量start.终止偏移量end 以及可选的步长step 来定义一个分片. 格式: [start:en ...
- Amazon AWS
- Powerdesigner 生成数据字典
https://www.jianshu.com/p/f491d0d3c503http://blog.csdn.net/adparking/article/details/50402980http:// ...
- C#可扩展编程之MEF(五)：MEF高级进阶
好久没有写博客了,今天抽空继续写MEF系列的文章.有园友提出这种系列的文章要做个目录,看起来方便,所以就抽空做了一个,放到每篇文章的最后. 前面四篇讲了MEF的基础知识,学完了前四篇,MEF中比较 ...
- Spring MVC(十二)--使用ModelView实现重定向
上一篇总结了使用返回字符串的方式实现重定向以及重定向过程中传递字符串参数和pojo参数的过程,本篇总结另一种重定向的实现方式--返回ModelAndView 这次的场景是这样的:在页面输入一些信息添加 ...
- SpringBoot 02_返回json数据
在SpringBoot 01_HelloWorld的基础上来返回json的数据,现在前后端分离的情况下多数都是通过Json来进行交互,下面就来利用SpringBoot返回Json格式的数据. 1:新建 ...
- Python学习day05 - Python基础(3) 格式化输出和基本运算符
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- C# GDI+编程（二）
常用的绘图函数 DrawArc绘制一个弧形 示例:graphics.DrawArc(pen,,,,,,) 倒数第二个参数,表示起始度数,最后一个参数是弧形的跨越度数.比如起始度数是90,跨越度数是12 ...
- PKU OJ A Bug's life
http://bailian.openjudge.cn/tm2018/G/ #include <iostream> #include <vector> #include < ...
- SQL中distinct 和 row_number() over() 的区别及用法
1 前言 在咱们编写 SQL 语句操作数据库中的数据的时候,有可能会遇到一些不太爽的问题,例如对于同一字段拥有相同名称的记录,我们只需要显示一条,但实际上数据库中可能含有多条拥有相同名称的记录,从而在 ...