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,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...
随机推荐
- node web项目结构
- leetcode-337-打家劫舍三*
题目描述: 方法一:递归 # Definition for a binary tree node. # class TreeNode(object): # def __init__(self, x): ...
- 字符串+dp——cf1163D好题
很好的题(又复习了一波kmp) /* dp[i,j,k]:到s1的第i位,匹配s2到j,s3到k的最优解 */ #include<bits/stdc++.h> using namespac ...
- Config程序配置文件（configSections）操作实践及代码详注
所有与配置文件相关的类:(粗体为一般情况下使用到的类,其它类功能可能在很复杂的情况下才使用到.) 1.ConfigurationManager,这个提供用于打开客户端应用程序集的Configurati ...
- synchronized ReentrantLock 比较分析
在编写多线程代码的时候,对于不允许并发的代码,很多需要加锁进行处理.在进行加锁处理时候,synchronized作为java的内置锁,同时也是java关键字,最为被人熟知,即使是最初级的java程序员 ...
- shell与crontab定时器的结合
crond服务 以守护进程方式在无需人工干预的情况下来处理一些列的作业指令与服务 查看服务状态 systemctl status cron.service 停止服务 systemctl stop cr ...
- PAT甲级——A1089 Insert or Merge
According to Wikipedia: Insertion sort iterates, consuming one input element each repetition, and gr ...
- 一起使用Python里for循环和dictionary字典
1.先定义一个字典的内容 i= { 'status': 'success', 'country': '中国', 'countryCode': 'CN', 'region': 'BJ' } 2.打印字典 ...
- 1、Redis的使用
非关系型数据库分类: 分类 典型代表 典型应用场景 数据类型 优点 缺点 键值 (key-value) Tokyo Cabinet/Tyrant, Redis, Voldemort, Oracle B ...
- 验证occ和vtk整合工作的demo
在编译occ通过过后,我需要验证occ是否能够正常结合vtk进行开发工作 使用CMake进行环境变量设置: CMakeList.txt PROJECT (IGESReader) #VTK Part: ...