第五天接触vue的心得

一、组件通信

• 父传子：

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

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

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

• 子传父

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

子
 <button @click="send">点击给父亲打钱</button>
data () {
 return {
     money:'2万'
 }
},
methods:{
    send(){
        // $emit 用来触发子传父的方法的
        this.$emit('giveTo',this.money)
    }
},
父
<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
    }
},
</script>

• 非父子：

  • 首先创造关系 main.js->Vue.prototype.Event=new Vue()

  总结：发送数据用$emit需要触发条件接收数据用$on

二、is

• 解决标签的固定搭配问题
• 动态组件

<template>
  <div>
    <!-- 1、解决标签的固定搭配；2、动态组件 -->
    <ul>
      <li is="vOne">
        我是li内容-----
        <!-- <v-one></v-one> -->
      </li>
    </ul>
    <hr />
    <!-- 动态组件切换 -->
    <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",
    };
  },
};
</script>

三、slot

• 无名插槽

• 具名插槽

  <template>
   <div>solt
  <v-one>
      <!-- 无名插槽 -->
      <!-- 在vOne中添加 <slot></slot> -->
      <div>我是插入到one组件中的内容</div>
  </v-one>
  <hr>
  <v-two>
      <!-- 有名插槽 -->
      <div slot='aa'>自先沉稳</div>
      <div slot='bb'>而后爱人</div>
  </v-two>
  
   </div>
  </template>
  
  <script>
  import vOne from './one'
  import vTwo from './two'
  export default {
  components:{
      vOne,
      vTwo
  }
  }
  </script>
  <style>
  </style>
  

四、ref(不建议使用)

• ref 操作普通元素 就是获取到的dom元素

• ref 操作的组件 获取的就是组件的数据和方法

• 使用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>

五、jQuery

• npm install jquery --save

• 哪个页面需要直接导入即可

• 全局导入

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