Vue组件进阶（组件通信，is，slot，jq等）
1.组件通信
// 总结：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'],
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.安装jquery插件
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()
})
浙公网安备 33010602011771号