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'],
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()
})