vue重点知识

$nextTick()

1. 使用原由
由于Vue的数据驱动视图的更新是异步的，也就是在修改数据的当下视图不会立即更新，而是等同一事件循环中所有数据变化完成之后，统一进行视图更新。

2. 使用场景
需要在视图更新之后，基于新的视图进行操作，一般写在created和mounted里面

mounted(){
  this.$nextTick(()=> {
       this.setCircleHeiht()
   })
   window.addEventListener("resize",this.setCircleHeiht)
},
methods:{
    //设置圆的高度
    setCircleHeiht(){
        this.largeHeight = this.$refs.largeCircle[0].offsetWidth
        this.minHeight = this.$refs.minCircle[0].offsetWidth
    }
 }

子父组件之间的通信

1. 子组件向父组件传值
主要是通过$emit()进行传递
子组件代码：

<template>
  <div>
      <h3>这里是childA</h3>
      <button @click="_send">给父组件传个消息</button>
  </div>
</template>

<script>
export default {
name:'ChildA',
// 方法集合
methods: {
    _send(){
        this.$emit('send',{nickName:'Lucky'});  //将需要传的值作为$emit的第二个参数进行传递
    }
}
}
</script>

父组件代码：

<ChildA @send="touchMe"></ChildA>
    <h3>子组件的名字：{{getByChildA}}</h3>

<script>
import ChildA from './ChildA'
export default {
  name: 'HelloWorld',
  data () {
    return {
      getByChildA:'',
      name:'',
      age:'',
      msg:''
    }
  },
  components:{
    ChildA,   //父组件中注册子组件
  },
  methods:{
    touchMe(obj){
      this.getByChildA=obj.nickName;  //将从子组件中获取的值赋值给变量
    }
  }
}
</script>

2. 父组件向子组件传值
方式一：在子组件中使用props进行接收父组件传过来的值
子组件代码：

<div>
      <h3>这里是childC</h3>
      <h3>父组件传过来的值：姓名：{{inputName}} 年龄：{{inputage}}</h3>
  </div>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
    //接受父组件传过来的值
    props:{
        inputName:String,   //定义传值类型
        inputage:Number
    }
}
</script>

注意：props就是一个属性，不能写在data里面
父组件代码：

 <!-- 子组件与父组件之间的契合点 -->
    <ChildC :inputName="name" :inputage="age"></ChildC>
data () {
    return {
      name:'cc',   //父组件要向子组件传递的值
      age:20
    }
  },

方式二：用this.$refs进行传递，在父组件中引入子组件的时候还需要用ref进行绑定

子组件代码：

<template>
  <div>
      <h3>这里是childB</h3>
      <h3>父组件传过来的值：姓名：{{name}} 年龄：{{age}}</h3>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
  components: {
    
  },
  // 定义属性
  data() {
    return {
        name:'',
        age:''
    }
  },
  methods: {
      //父组件触发子组件的init方法
    init(name,age){
        this.name=name;
        this.age=age;
    }
  }
}
</script>

父组件代码：

<button @click="getData">父组件给子组件传值</button>
    <ChildB ref="myChildB"></ChildB>
methods:{
    getData(){
      //触发子组件的方法并且传参   init函数名与子组件中的函数名一致
      this.$refs.myChildB.init("childB","18")
    }
  }

运行结果：
初始时：
点击按钮之后：