Vue day05 组建通信，（父传子，子传父，兄弟之间数据切换，is,jq,slot,ref）

最新推荐文章于 2024-05-13 10:16:48 发布

阅读量240

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/csdn_zy008/article/details/110296585

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue day05 组建通信，（父传子，子传父，兄弟之间数据切换，is,jq,slot,ref）

1.组建通信

a.父传子

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

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'],

案例，选项卡

<template>
<div>
  <v-li v-for='item in arr' :key='item.id' :teachers='item'></v-li>

</div>
  
</template>

<script>
import vLi from './li'
export default {
  components:{
    vLi
  },
  data(){
   return{
     arr:[
        {
          id:1,
          img:'http://www.ujiuye.com/uploadfile/2019/0109/20190109044511778.jpg',
          name :'李老师',
          job:'院长'

        },
        {
             id:2,
             img:'http://www.ujiuye.com/uploadfile/2019/0520/20190520111649902.jpg',
             name:'张老师',
             job:'副院长'
         },
          {
             id:3,
             img:'http://www.ujiuye.com/uploadfile/2019/1204/20191204035339485.jpg',
             name:'伍老师',
             job:'高级讲师'
         },
      ]

   } 
  }

}
</script>

<style>

</style>

<template>
 
  
    <div class="li">
    <img :src="teachers.img" >
    <div>姓名:{{teachers.name}}</div>
    <div>职位:{{teachers.job}}</div>


  </div>
</template>

<script>

export default {
  props:['teachers'],
  components:{

  },

 
}
</script>

<style>
.li{
    width: 200px;
    height: 360px;
    border: 1px solid blue;
    display: inline-block;
    margin-left: 20px;
}
.li img{
    width: 200px;
}
.li div{
    text-align: center;
    margin: 10px
}
</style>

b.子传父

条件：子组件里有事件触发，有约束条件
子组件传通过   this.$emit('方法名'，this.传给父元素的属性)
父组件接受通过   <v-child  @方法名=‘自定义方法名’></v-child>
				methods:{ 自定义的方法名（e） //e就是子组件传给父组件的属性}

childer.vue

<template>
<div>
    childer
    <button @click='send'>点击给父亲钱</button>
</div>
</template>
<script>
export default {
components:{
 },
data () {
 return {
     money:'20000元'
 }
},
methods:{
    send(){
        this.$emit('giveTo',this.money)
    }
},
mounted(){
}
}
</script>
<style>
</style>

prevent.vue

<template>
<div>
    prevent
    <v-childer @giveTo="my"></v-childer>
    <div>这是儿子给的钱 -------{{myMoney}}</div>
</div>
</template>
<script>
import vChilder from './childer'
export default {
components:{
    vChilder
 },
data () {
 return {
     myMoney:''
 }
},
methods:{
    my(e){
        this.myMoney = e
        

    }
},
mounted(){
}
}
</script>
<style>
</style>

c.非父子

首先创造关系    在main.js文件中->Vue.prototype.Event=new Vue()

this.Event.$emit()发送属性
this.Event.$on()接受方法

main.js


Vue.prototype.Event = new Vue()

发送的组件a
<template>
<div>
    a
    <button @click="sendB">把数据发送给b</button>
</div>
</template>
<script>
export default {
components:{
 },
data () {
 return {
     msgA:'我是a的数据'
 }
},
methods:{
    sendB(){
        this.Event.$emit('sendB',this.msgA)
    }
},
mounted(){
   
}
}
</script>
<style>
</style>

接受的组件b

<template>
<div>
    b ------- 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>
</style>

2.is

1.解决标签的固定搭配问题
2.动态组件

父组件
<template>
<div>
    is
    <ul>
        <li is="vDiedi">我是li的内容------<v-diedi></v-diedi></li>
    </ul>
    <v-er></v-er>

    <button @click="name='vDiedi'">vDiedi</button><button @click="name='vEr'">vEr</button>
    <div :is='name'></div>
</div>
</template>
<script>
import vDiedi from './diedi'
import vEr from './er'
export default {
components:{
    vDiedi,
    vEr

 },
data () {
 return {
     name:'vDiedi' 
 }
},
methods:{
},
mounted(){
}
}
</script>
<style>
</style>

两个子组件

<template>
	<div>
   	 er
	</div>
</template>
<script>
	export default {
	components:{
	 },
data () {
 	return {
        
 	}
},
methods:{
},
mounted(){
}
}
</script>
<style>
</style>




<template>
	<div>
        diedi
	</div>
</template>
<script>
    export default {
	components:{
 	},
data () {
 	return {
 	}
},
methods:{
    
},
mounted(){
    
}
}
</script>
<style>
</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(不建议使用) 会影响Vue的性能和数据驱动

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

子组件

<template>
<div>
    one
    <div ref="aa" class="box"></div>
    <v-two ref="bb"></v-two>
    这是从one组件拿回来的数据{{myMsg}}
</div>
</template>
<script>
import vTwo from './two'
export default {
components:{
    vTwo
 },
data () {
 return {
     myMsg:''
 }
},
methods:{
},
mounted(){
   // console.log(this.$refs.aa.offsetWidth);
    //console.log(this.$refs.bb.fn());
    //console.log(this.$refs.bb.msg);
    this.myMsg = this.$refs.bb.msg
}
}
</script>
<style>
.box{
    width: 100px;
    height: 100px;
    background: red;
}
</style>

父组件


<template>
<div>
    two
    <div>我是two组件{{fn()}}</div>
</div>
</template>
<script>
export default {
components:{
 },
data () {
 return {
     msg:'我是two组件'
 }
},
methods:{
    fn(){
        console.log('我是ref调用的方法');
    }
},
mounted(){
}
}
</script>
<style>
</style>

5.jquery

1.安装
npm  install jquery --save
哪个页面需要直接导入即可  
import $ from 'jquery'

mounted(){
	$('button').click(()=>{
		$('button').width()
	})
}

2.全局导入
在main.js中
import $ from 'jquery'
Vue.prototype.$ = $ 
//此时$就是Vue实例中的一个属性，所以需要通过this调用
mounted(){
	this.$('button').click(()=>{
			this.$('.box').width()
}