想知道Vue3与Vue2的区别?五千字教程助你快速上手Vue3!（中）

时间2023-07-29 02:01:12发布访客分类VUE浏览1557

导读：attrs和listeners子组件使用$attrs可以获得父组件除了props传递的属性和特性绑定属性 (class和 style 之外的所有属性。子组件使用$listeners可以获得父组件(不含.native修饰器的所有v-on事件...

attrs和listeners

子组件使用$attrs可以获得父组件除了props传递的属性和特性绑定属性 (class和 style)之外的所有属性。

子组件使用$listeners可以获得父组件(不含.native修饰器的)所有v-on事件监听器，在Vue3中已经不再使用；但是Vue3中的attrs不仅可以获得父组件传来的属性也可以获得父组件v-on事件监听器

选项式API

//父组件
template>
    
  div>
    
    Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2"  />
    
  /div>
    
/template>
    
script>

import Child from './Child'
export default {

  components:{

    Child
  }
,
  data(){

    return {

      msg1:'子组件msg1',
      msg2:'子组件msg2'
    }

  }
,
  methods: {

    parentFun(val) {

      console.log(`父组件方法被调用,获得子组件传值：${
val}
`)
    }

  }

}
    
/script>
    
//子组件
template>
    
  div>
    
    button @click="getParentFun">
    调用父组件方法/button>
    
  /div>
    
/template>
    
script>

export default {

  methods:{

    getParentFun(){

      this.$listeners.parentFun('我是子组件数据')
    }

  }
,
  created(){

    //获取父组件中所有绑定属性
    console.log(this.$attrs)  //{
"msg1": "子组件msg1","msg2": "子组件msg2"}

    //获取父组件中所有绑定方法    
    console.log(this.$listeners) //{
parentFun:f}

  }

}
    
/script>

组合式API

//父组件
template>
    
  div>
    
    Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
    
  /div>
    
/template>
    
script>

import Child from './Child'
import {
 defineComponent,ref }
     from "vue";

export default defineComponent({

  components: {

    Child
  }
,
  setup() {
    
    const msg1 = ref('子组件msg1')
    const msg2 = ref('子组件msg2')
    const parentFun = (val) =>
 {

      console.log(`父组件方法被调用,获得子组件传值：${
val}
`)
    }

    return {

      parentFun,
      msg1,
      msg2
    }
    ;

  }
,
}
    );
    
/script>
    
//子组件
template>
    
    div>
    
        button @click="getParentFun">
    调用父组件方法/button>
    
    /div>
    
/template>
    
script>

import {
 defineComponent }
     from "vue";

export default defineComponent({

    emits: ['sendMsg'],
    setup(props, ctx) {

        //获取父组件方法和事件
        console.log(ctx.attrs) //Proxy {
"msg1": "子组件msg1","msg2": "子组件msg2"}
    
        const getParentFun = () =>
 {

            //调用父组件方法
            ctx.attrs.onParentFun('我是子组件数据')
        }

        return {

            getParentFun
        }
    ;

    }
,
}
    );
    
/script>

setup语法糖

//父组件
template>
    
  div>
    
    Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
    
  /div>
    
/template>
    
script setup>

import Child from './Child'
import {
 ref }
     from "vue";
    
const msg1 = ref('子组件msg1')
const msg2 = ref('子组件msg2')
const parentFun = (val) =>
 {

  console.log(`父组件方法被调用,获得子组件传值：${
val}
`)
}
    
/script>
    
//子组件
template>
    
    div>
    
        button @click="getParentFun">
    调用父组件方法/button>
    
    /div>
    
/template>
    
script setup>

import {
 useAttrs }
     from "vue";

const attrs = useAttrs()
//获取父组件方法和事件
console.log(attrs) //Proxy {
"msg1": "子组件msg1","msg2": "子组件msg2"}
    
const getParentFun = () =>
 {

    //调用父组件方法
    attrs.onParentFun('我是子组件数据')
}
    
/script>

注意

Vue3中使用attrs调用父组件方法时，方法前需要加上on；如parentFun-> onParentFun

provide/inject

provide：是一个对象，或者是一个返回对象的函数。里面包含要给子孙后代属性

inject：一个字符串数组，或者是一个对象。获取父组件或更高层次的组件provide的值，既在任何后代组件都可以通过inject获得

选项式API

//父组件
script>

import Child from './Child'
export default {

  components: {

    Child
  }
,
  data() {

    return {

      msg1: '子组件msg1',
      msg2: '子组件msg2'
    }

  }
,
  provide() {

    return {

      msg1: this.msg1,
      msg2: this.msg2
    }

  }

}
    
/script>
    
//子组件
script>

export default {

  inject:['msg1','msg2'],
  created(){

    //获取高层级提供的属性
    console.log(this.msg1) //子组件msg1
    console.log(this.msg2) //子组件msg2
  }

}
    
/script>

组合式API

//父组件
script>

import Child from './Child'
import {
 ref, defineComponent,provide }
     from "vue";

export default defineComponent({

  components:{

    Child
  }
,
  setup() {

    const msg1 = ref('子组件msg1')
    const msg2 = ref('子组件msg2')
    provide("msg1", msg1)
    provide("msg2", msg2)
    return {

      
    }

  }
,
}
    );
    
/script>
    
//子组件
template>
    
    div>
    
        button @click="getParentFun">
    调用父组件方法/button>
    
    /div>
    
/template>
    
script>

import {
 inject, defineComponent }
     from "vue";

export default defineComponent({

    setup() {

        console.log(inject('msg1').value) //子组件msg1
        console.log(inject('msg2').value) //子组件msg2
    }
,
}
    );
    
/script>

setup语法糖

//父组件
script setup>

import Child from './Child'
import {
 ref,provide }
     from "vue";
    
const msg1 = ref('子组件msg1')
const msg2 = ref('子组件msg2')
provide("msg1",msg1)
provide("msg2",msg2)
/script>
    
//子组件
script setup>

import {
 inject }
     from "vue";
    
console.log(inject('msg1').value) //子组件msg1
console.log(inject('msg2').value) //子组件msg2
/script>


说明

provide/inject一般在深层组件嵌套中使用合适。一般在组件开发中用的居多。

parent/children

$parent: 子组件获取父组件Vue实例，可以获取父组件的属性方法等

$children: 父组件获取子组件Vue实例，是一个数组，是直接儿子的集合，但并不保证子组件的顺序

Vue2

import Child from './Child'
export default {

  components: {

    Child
  }
,
  created(){

    console.log(this.$children) //[Child实例]
    console.log(this.$parent)//父组件实例
  }

}

注意父组件获取到的$children并不是响应式的

expose& ref

$refs可以直接获取元素属性，同时也可以直接获取子组件实例

选项式API

//父组件
template>
    
  div>
    
    Child ref="child" />
    
  /div>
    
/template>
    
script>

import Child from './Child'
export default {

  components: {

    Child
  }
,
  mounted(){

    //获取子组件属性
    console.log(this.$refs.child.msg) //子组件元素
    //调用子组件方法
    this.$refs.child.childFun('父组件信息')
  }

}
    
/script>
    
//子组件 
template>
    
  div>
    
    div>
    /div>
    
  /div>
    
/template>
    
script>

export default {

  data(){

    return {

      msg:'子组件元素'
    }

  }
,
  methods:{

    childFun(val){

      console.log(`子组件方法被调用,值${
val}
`)
    }

  }

}
    
/script>

组合式API

//父组件
template>
    
  div>
    
    Child ref="child" />
    
  /div>
    
/template>
    
script>

import Child from './Child'
import {
 ref, defineComponent, onMounted }
     from "vue";

export default defineComponent({

  components: {

    Child
  }
,
  setup() {
    
    const child = ref() //注意命名需要和template中ref对应
    onMounted(() =>
 {

      //获取子组件属性
      console.log(child.value.msg) //子组件元素
      //调用子组件方法
      child.value.childFun('父组件信息')
    }
)
    return {

      child //必须return出去 否则获取不到实例
    }

  }
,
}
    );
    
/script>
    
//子组件
template>
    
    div>
    
    /div>
    
/template>
    
script>

import {
 defineComponent, ref }
     from "vue";

export default defineComponent({

    setup() {
    
        const msg = ref('子组件元素')
        const childFun = (val) =>
 {

            console.log(`子组件方法被调用,值${
val}
`)
        }

        return {

            msg,
            childFun
        }

    }
,
}
    );
    
/script>

setup语法糖

//父组件
template>
    
  div>
    
    Child ref="child" />
    
  /div>
    
/template>
    
script setup>

import Child from './Child'
import {
 ref, onMounted }
     from "vue";
    
const child = ref() //注意命名需要和template中ref对应
onMounted(() =>
 {

  //获取子组件属性
  console.log(child.value.msg) //子组件元素
  //调用子组件方法
  child.value.childFun('父组件信息')
}
    )
/script>
    
//子组件
template>
    
    div>
    
    /div>
    
/template>
    
script setup>

import {
 ref,defineExpose }
     from "vue";
    
const msg = ref('子组件元素')
const childFun = (val) =>
 {

    console.log(`子组件方法被调用,值${
val}
`)
}

//必须暴露出去父组件才会获取到
defineExpose({

    childFun,
    msg
}
    )
/script>

注意

通过ref获取子组件实例必须在页面挂载完成后才能获取。

在使用setup语法糖时候，子组件必须元素或方法暴露出去父组件才能获取到

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

若转载请注明出处：想知道Vue3与Vue2的区别?五千字教程助你快速上手Vue3!（中）
本文地址： https://pptw.com/jishu/340481.html

Vue 3的全新Reactivity API：解锁响应式编程的力量服务器集群部署怎么做