vue 组件通信

最新推荐文章于 2023-09-10 20:57:04 发布

前端菜鸟-001

最新推荐文章于 2023-09-10 20:57:04 发布

阅读量111

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_46036183/article/details/110308758

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细解读Vue组件间的通信方式，包括父传子的props、子传父的$emit，以及非父子组件间的$emit/$on。实例演示了如何通过props传递基础数据、对象，以及利用$emit处理事件和动态组件的交互。

摘要由CSDN通过智能技术生成

vue 组件通信

1.组件通信

a.父传子：

// 总结：1.父传子：传递的是基础数据类型  给父组件中的子组件绑定属性，此时属性的值在父组件中已经定义，子组件需要通过props接收,要用数组接收  在子组件中直接渲染接收到的值即可

// 2.父传子:子修改父组件传递的值报错,如果解决，把父组件传递过来的值变为自己的属性，直接修改自己属性即可。后果：父组件修改不会影响自己的数据

// 3.父传子:父变，子变，子变，父变，需要在父组件中定义对象，传递给子组件的就是对象的方式，子组件正常接收即可

parent.vue 父组件

<template>
  <div>
    parent
    <div>这是给儿子的礼物----{{ msg }}</div>
    <input type="text" v-model="msg" />
    <div>{{info}}</div>
    <input type="text" v-model='info.name'>
    <v-child :gift="msg" :money="money" :info='info'></v-child>
  </div>
</template>
<script>
import vChild from "./child";
export default {
  components: {
    vChild,
  },
  data() {
    return {
      msg: "大奔",
      money: 2000,
      info:{
        name:'张三'
      },
    };
  },
  methods: {},
  mounted() {},
};
</script>
<style>
</style>

child.vue 子组件
props: ["gift", "money",'info'],

parentCase

case.vue
<template>
<div>
    <v-java></v-java>
    <v-ui></v-ui>
    <v-web></v-web>
</div>
</template>
<script>
import vJava from './java'
import vUi from './ui'
import vWeb from './web'
export default {
components:{
    vJava,
    vUi,
    vWeb
 },
data () {
 return {
 }
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
</style>

java.vue 
<template>
<div>
    <h2>java讲师</h2>
    //这是循环添加的  key必须要绑定   由于card里面渲染的是具体的数据，所以传递过去对象即可
    <v-card v-for='item in arr' :key='item.id'  :teachers='item'></v-card>
     <!-- <v-card></v-card> -->
</div>
</template>
<script>
import vCard from './card'
export default {
components:{
    vCard
 },
data () {
 return {
     arr:[
         {
             id:1,
             img:'http://www.ujiuye.com/uploadfile/2019/0109/20190109071725808.jpg',
             name:'李老师',
             job:'院长'
         },
          {
             id:2,
             img:'http://www.ujiuye.com/uploadfile/2019/0423/20190423094745162.jpg',
             name:'张老师',
             job:'副院长'
         },
          {
             id:3,
             img:'http://www.ujiuye.com/uploadfile/2019/0423/20190423105110779.jpg',
             name:'伍老师',
             job:'高级讲师'
         },
     ]
 }
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
</style>

card.vue
   props:['teachers']

b.子传父：

子组件通过this.$emit触发方法

child.vue
<template>
<div>
    child
    <button @click="send">点击给父亲打钱</button>
</div>
</template>
<script>
export default {
components:{
 },
data () {
 return {
     money:'2万'
 }
},
methods:{
    send(){
        // $emit 用来触发子传父的方法的
        this.$emit('giveTo',this.money)
    }
},
mounted(){
}
}
</script>
<style scoped>
</style>

parent.vue
<template>
<div>
    parent
    这是儿子给的钱----{{myMoney}}
    <v-child @giveTo='own'></v-child>
</div>
</template>
<script>
import vChild from './child'
export default {
components:{
    vChild
 },
data () {
 return {
     myMoney:''
 }
},
methods:{
    own(e){
        console.log(e)
        this.myMoney = e
    }
},
mounted(){
}
}
</script>
<style scoped>
</style>

c.非父子:

1.首先创造关系     main.js->Vue.prototype.Event=new Vue()
总结：发送数据用$emit 需要触发条件        接收数据用$on
a.vue
<template>
<div>
    aaaaa
    <button @click="sendB">把数据发送给B</button>
</div>
</template>
<script>
export default {
components:{
 },
data () {
 return {
     msgA:'我是a的数据'
 }
},
methods:{
    sendB(){
        // 发送数据
       this.Event.$emit('sendB',this.msgA)
    }
},
mounted(){
    console.log(this.Event) //Vue 
}
}
</script>
<style scoped>
</style>

b.vue
<template>
<div>
    bbbbb----fromA{{fromA}}
</div>
</template>
<script>
export default {
components:{
 },
data () {
 return {
     fromA:''
 }
},
methods:{
},
mounted(){
    // 接收数据 $on()
    this.Event.$on('sendB',(e)=>{
        console.log(e)
        this.fromA = e
    })

}
}
</script>
<style scoped>
</style>

b->c数据
b.vue
<template>
<div>
    bbbbb----fromA{{fromA}}
    <button @click="sendC">发送给C</button>
</div>
</template>
<script>
export default {
components:{
 },
data () {
 return {
     fromA:''
 }
},
methods:{
    sendC(){
        this.Event.$emit('sendC',this.fromA)
    }
},
mounted(){
    // 接收数据 $on()
    this.Event.$on('sendB',(e)=>{
        console.log(e)
        this.fromA = e
    })

}
}
</script>
<style scoped>
</style>

c.vue
<template>
<div>
    cccccc -----{{fromA}}
</div>
</template>
<script>
export default {
components:{
 },
data () {
 return {
     fromA:''
 }
},
methods:{
},
mounted(){
    this.Event.$on('sendC',(e)=>{
        this.fromA = e
    })
}
}
</script>
<style scoped>
</style>

2.is

1.解决标签的固定搭配问题
2.动态组件
<template>
<div>
    <!-- is  1.解决标签的固定搭配  ul>li 
             2.动态组件
     -->
     <ul>
         <li is='vOne'>我是li的内容-------- <v-one></v-one></li>
     </ul>

     <hr>
     <!-- one two  动态组件切换-->
     <button @click="name='vOne'">one</button><button @click="name='vTwo'">two</button>
     <div :is='name'></div>
</div>
</template>
<script>
import vOne from './one' 
import vTwo from './two' 
export default {
components:{
    vOne,
    vTwo
 },
data () {
 return {
     name:'vOne'
 }
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
</style>

3.slot

1.无名插槽
在子组件中添加<slot></slot>
在slot.vue
<v-one>
<div>我就是插入到one组件中的内容1111</div>
<div>我就是插入到one组件中的内容22222</div>
</v-one>
在one.vue
<!-- 无名插槽 -->
<slot></slot>	
one
<slot></slot>

2.具名插槽
在slot.vue中
 <v-two>
 <div slot="aa">白日依山尽</div>
 <div slot="bb">黄河入海流</div>
 <div slot="cc">欲穷千里目</div>
 <div slot="dd">更上一层楼</div>
 <p>我是新增加的</p>
 </v-two>
 在two.vue中
 <div>
     <slot name='aa'></slot>
     <slot name='bb'></slot>
     two
     <slot name='cc'></slot>
     <slot name='dd'></slot>
     <slot></slot>
 </div>

4.ref(不建议使用)

1.ref 操作普通元素  就是获取到的dom元素
2.ref 操作的组件    获取的就是组件的数据和方法
3.使用ref  需要通过this.$refs来获取

在ref.vue中
<template>
<div>
    <div class="box" ref='box'></div>
    <v-one ref='one'></v-one>
    这是从one组件拿回来的数据{{myMsg}}
</div>
</template>
<script>
import vOne from './one'
export default {
components:{
    vOne
 },
data () {
 return {
     myMsg:''
 }
},
methods:{
},
mounted(){
    // 总结：1.对于普通元  ref ->$refs来获取元素，获取之后就是普通的dom元素.
    // console.log(this.$refs.box.offsetWidth)
    console.log(this.$refs.one.fn())
    console.log(this.$refs.one.msg)
    this.myMsg = this.$refs.one.msg
}
}
</script>
<style>
.box{
    width: 100px;
    height: 100px;
    background: red;
}
</style>

5.jquery

1.npm  install jquery --save
2.哪个页面需要直接导入即可  
import $ from 'jquery'
mounted(){
	$('button').click(()=>{
		$('.box').width()
	})
}
3.全局导入
在main.js 
import $ from 'jquery'
Vue.prototype.$ = $;
//此时这个$是vue实例中的一个属性，所以需要通过this调用
this.$('button').click(()=>{
		this.$('.box').width()
})

前端菜鸟-001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 组件通信

vue 组件通信1.组件通信a.父传子：// 总结：1.父传子：传递的是基础数据类型给父组件中的子组件绑定属性，此时属性的值在父组件中已经定义，子组件需要通过porps接收,要用数组接收在子组件中直接渲染接收到的值即可// 2.父传子:子修改父组件传递的值报错,如果解决，把父组件传递过来的值变为自己的属性，直接修改自己属性即可。后果：父组件修改不会影响自己的数据// 3.父传子:父变，子变，子变，父变，需要在父组件中定义对象，传递给子组件的就是对象的方式，子组件正常接收即可pare
复制链接

扫一扫