vue组件通信新姿势
在vue项目实际开发中我们经常会使用props和emit来进行子父组件的传值通信,父组件向子组件传递数据是通过prop传递的,
子组件传递数据给父组件是通过$emit触发事件来做到的。例如:
Vue.component('child',{
data(){
return {
mymessage:this.message
}
},
template:`
<div>
<input type="text" v-model="mymessage" @input="passData(mymessage)"> </div>
`,
props:['message'],//得到父组件传递过来的数据
methods:{
passData(val){
//触发父组件中的事件
this.$emit('getChildData',val)
}
}
})
Vue.component('parent',{
template:`
<div>
<p>this is parent compoent!</p>
<child :message="message" v-on:getChildData="getChildData"></child>
</div>
`,
data(){
return {
message:'hello'
}
},
methods:{
//执行子组件触发的事件
getChildData(val){
console.log(val)
}
}
})
var app=new Vue({
el:'#app',
template:`
<div>
<parent></parent>
</div>
`
})
既然是新姿势当然要介绍一下骚操作
1.$attrs和$listeners
适用场景:父组件A下面有子组件B,组件B下面有组件C,这时候如果A组件想传值给C组件就可以用$attrs和$listeners
Vue.component('C',{
template:`
<div>
<input type="text" v-model="$attrs.messagec" @input="passCData($attrs.messagec)"> </div>
`, methods:{
passCData(val){
//触发父组件A中的事件
this.$emit('getCData',val)
}
}
}) Vue.component('B',{
data(){
return {
mymessage:this.message
}
},
template:`
<div>
<input type="text" v-model="mymessage" @input="passData(mymessage)">
<!-- C组件中能直接触发getCData的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
<!-- 通过v-bind 绑定$attrs属性,C组件可以直接获取到A组件中传递下来的props(除了B组件中props声明的) -->
<C v-bind="$attrs" v-on="$listeners"></C>
</div>
`,
props:['message'],//得到父组件传递过来的数据
methods:{
passData(val){
//触发父组件中的事件
this.$emit('getChildData',val)
}
}
})
Vue.component('A',{
template:`
<div>
<p>this is parent compoent!</p>
<B :messagec="messagec" :message="message" v-on:getCData="getCData" v-on:getChildData="getChildData(message)"></B>
</div>
`,
data(){
return {
message:'hello',
messagec:'hello c' //传递给c组件的数据
}
},
methods:{
getChildData(val){
console.log('这是来自B组件的数据')
},
//执行C子组件触发的事件
getCData(val){
console.log("这是来自C组件的数据:"+val)
}
}
})
var app=new Vue({
el:'#app',
template:`
<div>
<A></A>
</div>
`
})
2.provide和inject
适用场景:父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据,只要在父组件的生命周期内,子组件都可以调用。
Vue.component('child',{
inject:['for'],//得到父组件传递过来的数据
data(){
return {
mymessage:this.for
}
},
template:`
<div>
<input type="tet" v-model="mymessage">
</div>
})
Vue.component('parent',{
template:`
<div>
<p>this is parent compoent!</p>
<child></child>
</div>
`,
provide:{
for:'test'
},
data(){
return {
message:'hello'
}
}
})
var app=new Vue({
el:'#app',
template:`
<div>
<parent></parent>
</div>
`
})
3.$parent和$child
使用场景:在父组件中可直接通过this.$children操作子组件,子组件中可通过this.$parent修改父组件的值
Vue.component('child',{
props:{
value:String, //v-model会自动传递一个字段为value的prop属性
},
data(){
return {
mymessage:this.value
}
},
methods:{
changeValue(){
this.$parent.message = this.mymessage;//通过如此调用可以改变父组件的值
}
},
template:`
<div>
<input type="text" v-model="mymessage" @change="changeValue">
</div>
})
Vue.component('parent',{
template:`
<div>
<p>this is parent compoent!</p>
<button @click="changeChildValue">test</button >
<child></child>
</div>
`,
methods:{
changeChildValue(){
this.$children[0].mymessage = 'hello';
}
},
data(){
return {
message:'hello'
}
}
})
var app=new Vue({
el:'#app',
template:`
<div>
<parent></parent>
</div>
`
})
vue组件通信新姿势的更多相关文章
- Vue组件v-if新渲染的组件不更新
Vue组件v-if新渲染的组件不更新:可能原因是Vue识别到是相似组件(高度相似甚至相同)不会更新元素.给原来的组件和新组件分别给不同的key值让Vue识别为不同的组件.
- vue组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
- vue组件通信之父子组件通信
准备工作: 首先,新建一个项目,如果这里有不会的同学,可以参考我转载过的文章 http://www.cnblogs.com/Sky-Ice/p/8875958.html vue 脚手架安装及新建项目 ...
- vue组件通信全面总结
写在前面 组件间的通信是是实际开发中非常常用的一环,如何使用对项目整体设计.开发.规范都有很实际的的作用,我在项目开发中对此深有体会,总结下vue组件间通信的几种方式,讨论下各自的使用场景 文章对相关 ...
- vue 组件通信
组件 组件之间的数据是单向绑定的. 父组件向子组件通信 是通过子组件定义的props属性来实现.通过props定义变量与变量类型和验证方式. props简化定义 在简化定义中,变量是以数组的方式定义. ...
- VUE 组件通信总结
1.prop 父组件传递给子组件,即通过VUE本身具有的Props属性来传递值 Child组件 <template> <span>{{message}}</span> ...
- vue组件通信那些事儿
一.说说通信 通信,简言之,交流信息.交流结束后,把信息放在哪里,这是一个值得思考的问题.vue中保存状态有2种方式,组件内的data属性和组件外的vuex的state属性. 1.用state的场景 ...
- vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...
- vue 组件通信传值
父子组件通信: 子组件 <template> <div> <h3 @click="alerrt"> 我是子组件一</h3> < ...
随机推荐
- java基础 ----- 程序的调试
--- -- 什么是程序调试 当程序出错时,我们希望可以这样 逐条语句执行程序 ----- 观察程序的执行情况 ------ 发现问题 ----- 解决问题 但是,程序一闪就运行结束 ...
- 在vscode中使用eslint
一.vs中安装eslint插件 二.npm 全局安装 eslint sudo npm i -g eslint 三.vs终端运行eslint --init 四.在vscode的setting中设置 ...
- php socket多进程简单服务器(一)
进程,线程 IO复用,协程都是处理完成并发的方式 socket分为 三步 服务器监听,客户端请求,连接确认, 每次连接都由当前进程来处理,可以通过IO复用来解决这个问题, 这次通过进程来完成并发请 ...
- 201771010134杨其菊《面向对象程序设计java》第十周学习总结
第8章泛型程序设计学习总结 第一部分:理论知识 主要内容: 什么是泛型程序设计 泛型类的声明及实例化的方法 泛型方法的定义 ...
- P2158 [SDOI2008] 仪仗队(欧拉函数模板)
题目描述 作为体育委员,C君负责这次运动会仪仗队的训练.仪仗队是由学生组成的N * N的方阵,为了保证队伍在行进中整齐划一,C君会跟在仪仗队的左后方,根据其视线所及的学生人数来判断队伍是否整齐(如下图 ...
- Eclipse 中 Maven 项目默认JDK版本为1.5 的解决方法
在 Eclipse 中 Maven project 的默认 JDK 版本是 1.5, 如果不在 settings.xml 或者 pom.xml 中显示的指出 JDK 版本,每次 右键项目--> ...
- zz-人生感悟
1. 社交感想 首先来看一下聪明人和普通人的区别是什么? 普通人思考问题都是一步一步的来,由A推理出B,B推导到C,再推导出D,最后得出E,然而聪明人却可以由A直接推算到E. 这就像开车,普通人的是手 ...
- logstash 修改配置不重启的方法
1.修改好yml配置 2.进入logstash 容器内,或服务器上 3.ps -ef | grep logstash 拿到进程号 4.kill -1 <pid> 5.logstash 会重 ...
- Core DES加、解密
安装 Portable.BouncyCastle Nuget包 地址:https://www.nuget.org/packages/Portable.BouncyCastle/ Install-Pac ...
- 低版本的Chrome,打开url时,报错,IE确可以打开;
解决办法:打开注册表,添加以下内容,之后重启服务器: [HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\HTTP\Parameters]Ena ...