Vue中的组件通信、ref、jquery、is属性、slot插槽

组件通信

1、父子组件:传递基本数据类型，通过绑定自定义属性，子组件通过props接收

a.父变子变 直接传递基本数据类型
b.子变父变 直接报错 解决方法：直接把父组件传递过来的值存储为自己的变量值
c.父变子变，子变父变 传递一个对象 由于传递的是对象，而对象传递的是地址，所以父子同时操作的是同一个地址

//父组件
<template>
<div>
    想要给子组件的礼物-----{{gift}}
    <input type="text" v-model="gift">
    <input type="text" v-model="toSon.sonGift">
    <hr>
    <v-child :gift='gift' :toSon='toSon'></v-child>
</div>
</template>
<script>
import vChild from './child'
export default {
components:{
    vChild
 },
data () {
 return {
     gift:'豪车',
     toSon:{
         sonGift:'金币'
     }
 }
},
methods:{
},
mounted(){
}
}
</script>
<style scoped>
</style>

　　

//子组件
<template>
    <div>
        child
        <div>这是父组件传递过来的数据----{{gift}}</div>
        <input type="text" v-model="gift">
        <h2>
            <input type="text" v-model="myGift">
        </h2>
        <hr>
        <input type="text" v-model="toSon.sonGift">
    </div>
</template>
<script>
export default {
    // props:接收父组件传递过来的属性
    props:['gift','toSon'],
    data(){
        return {
            myGift:'' //存储父组件传递过来的数据
        }
    },
    mounted() {
        console.log(1)
        // 注意:父组件传递过来的数据可以直接获取
        console.log(this.gift)
         console.log(this.toSon)
        this.myGift = this.gift
    },
    
}
</script>
<style scoped>
    
</style>

 

2.子父组件

子传父  绑定方法$emit(方法名，参数)

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

　　

//子组件
<template>
<div>
    child
   <button @click="send">点击给父组件传值</button>
</div>
</template>
<script>
export default {
components:{
 },
data () {
 return {
     money:'1万'
 }
},
methods:{
    send(){
        // 给父组件传值需要用$   $emit(方法名,传递的参数)
        this.$emit('giveTo',this.money)
    }
},
mounted(){
}
}
</script>
<style scoped>
</style>

　　

父子组件和子父组件总结

1.父传子: 给父组件中的子组件绑定属性，子组件通过props接收
2.子传父:给子组件绑定方法，通过$emit绑定方法名。在父组件中绑定约定的方法名即可.

3.非父子

1.首先在vue原型上定义一个属性，用来关联所有的vue的组件
Vue.prototype.Event = new Vue()
2.one->two 传值
在one组件中绑定事件
 <button @click="sendTwo">发送给two的数据</button>
 methods:{
    sendTwo(){
        // 发送数据$emit
        this.Event.$emit('sendTwo',this.msg)
    }
}
在two组件中无条件接受 （mounted）
mounted(){
    // 接收数据$on
    this.Event.$on('sendTwo',(e)=>{
        console.log(e)
    

　　

is属性

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

//解决标签固定搭配
ul>li  此时给li绑定 is属性  (<li is='vOne'></li>)   那么此时就是把li替换为组件vOne的内容

　

2.动态组件 首先在data中定义一个变量(name) 给name：'vOne'
 <!-- 用来展示组件内容 -->
 <div :is='name'></div>
 
 效果是点击one展示one的内容，点击two展示two内容 所以此时需要两个按钮
 <!-- 动态组件 -->
 <button @click="name='vOne'">one</button>
 <button @click="name='vTwo'">two</button>

　　

slot插槽

1.无名插槽

<v-one>组件内容</v-one>
在子组件v-one组件中写<slot></slot> 在组件内容的前后都可以　

2.具名插槽

<v-two>
	<div slot='aa'>aa</div>
	<div slot='bb'>bb</div>
</v-two>
在子组件中v-two中
<slot name='aa'></slot>

3.作用域插槽：子组件上有数据，html代码结构由父组件来提供

//子组件
<template>
    <div>
        <h1>子组件</h1>
        <!-- 子组件上有数据，但是具体的html结构是什么不确定 -->
        <ul>
            <slot v-for="item of arr" name="list" :val="item"></slot>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return{
            arr:['web前端','ui设计','大数据']
        }
    }
}
</script>

　

//父组件
<template>
    <div>
        <h1>父组件</h1>
        <!-- 父组件使用子组件时，提供具体的html结构 -->
        <v-child>
            <!-- 
                脚手架中v-for和v-if不建议混在一起用，所以这里用了template标签
                v-slot:插槽名称="形参"
                形参用来获取子组件传递过来的数据 
            -->
            <template v-slot:list="props">
                <li>{{ props.val }}</li>
            </template>
        </v-child>
    </div>
</template>

<script>
import vChild from './Child'
export default {
    components:{
        vChild
    }
}
</script>

　　

　

ref

1.主要是用来获取DOM元素
给元素绑定ref属性(ref='box') 通过this.$refs.box 来获取当前元素
2.获取组件
给元素绑定ref属性(ref='one') 通过this.$refs.box 来获取当前组件，那么此时可以使用组件中的属性和方法

　　

jquery

1.安装 npm i jquery --save
2.在需要的页面导入jquery
import $ from 'jquery'
mounted(){
	获取元素进行操作
	$('button').click(()=>{
          $('.box').fadeOut(3000)
      })
}
在<template>
	<div>
	 <div class="box"></div>
    <button>点击淡出</button>
    </div>
</template>