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,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...
随机推荐
- spring的mvc对于页面日期格式进行传值到后台
对于spring的mvc 日期格式从页面传入后台是个问题.string类型和整形都能友好传入.但是对于日期类型date却不能传入.回报403参数不对的错误. 看例子: @RequestMapping( ...
- thinkphp3.2.3 nginx 连接mysql 报错 new PDO 异常
在 php.ini 里重新指定mysql.sock 路径 pdo_mysql.default_socket=/Applications/XAMPP/xamppfiles/var/mysql/mysql ...
- Vim操作 -- 多段复位粘贴
Vim可以多段复制.粘贴.即,内容X复制到寄存器“1”,内容Y复制到寄存器“2”:粘贴时可以选择从“1”还是“2”粘贴. (1) Vim有13个粘贴板,分别是0.1.2.....9.a.“.+:用:r ...
- 「题解」：[组合数学]：Perm 排列计数
题干: Description称一个1,2,…,N的排列P1,P2…,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,…N的排列中有多少是Magic的,答 ...
- mysql列属性操作（转载）
1.mysql中修改字段长度: ALTER TABLE tb_article MODIFY COLUMN NAME VARCHAR(50); 这里的tb_article为表名,NAME为字段名,50为 ...
- 杂项-公司：Google
ylbtech-杂项-公司:Google 谷歌公司(Google Inc.)成立于1998年9月4日,由拉里·佩奇和谢尔盖·布林共同创建,被公认为全球最大的搜索引擎公司.谷歌是一家位于美国的跨国科技企 ...
- https://blog.csdn.net/qq_33169863/article/details/82977791
https://blog.csdn.net/qq_33169863/article/details/82977791 ** 查看设备连接 adb devices ** 列出手机已安装的包名 adb ...
- 可怜的baidu，可怜的音库
baidu词典中用的中文音库竟然全都是汉典的中文音库 真可怜,baidu这么大个公司竟然连着1250个发音都懒得录 汉典的音库布都是同一格式,导致一部分音频文件MCI函数无法播放 真他妈可 ...
- 11-3-while
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JZOJ5857 【NOIP提高组模拟A组2018.9.8】没有上司的舞会
题目 Description "那么真的有果尔德施坦因这样一个人?"他问道. "是啊,有这样一个人,他还活着.至于在哪里,我就不知道了." "那么那个 ...