vue-setup函数 - sdk社区

setup函数的定义和使用

setup() 会在在create 生命周期函数之前自动执行(实例被完全初始化之前)
返回结果需要为对象- - - return 对象

定义形式：

setup(options, context) {
  //内容
}

options, context是固定写法的两个参数
options- - -接收组件的所有内容
context- - -可以从中获得 attrs、slots、emit 的内容

const { attrs, slots, emit } = context

attrs- - -获取在父组件中插槽部分定义了的，但是子组件中没有用props进行接收的属性
slots- - -获取父组件中向子组件插槽传递的内容
emit- - -触发事件的方法

没有使用setup函数时:
获取组件内容- - -this.options 获取插槽内容- - -this.slots
触发事件方法- - -this.$emit

代码示例1：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>setUp函数的使用</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  const app = Vue.createApp({
    template: `<div @click="handleClick">{{name}}</div>`,
    methods: {
      test() {
        // 未使用setup函数时，获取组件内容方法：this.$options
        console.log(this.$options)
      }
    },
    mounted() {
      this.test()
    },
    // 在create 生命周期函数之前自动执行(实例被完全初始化之前)
    // setup函数需要返回一个对象
    setup(options, context) {
      return {
        name: '波吉',
        handleClick: () => {
          alert('你好卡克，我是波吉')
        }
      }
    }
  })
  const vm = app.mount('#root')
</script>
</html>

页面效果及控制台打印结果：

setup函数.gif

代码示例2:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>toRef以及context参数</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  const app = Vue.createApp({
    template: `
      <child>新的一周开始啦~</child>
    `
  })
  app.component('child', {
    setup(props, context) {
      const { attrs, slots, emit } = context
      console.log(attrs)
      console.log(slots.default())
      const { h } = Vue
      return () => h('div', {}, slots.default())
    }
  })
  const vm = app.mount('#root')
</script>
</html>

页面效果：

代码示例3：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>toRef以及context参数</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  const app = Vue.createApp({
    methods: {
      handleChange() {
        alert('波吉加油！')
      }
    },
    template: `
      <child @change="handleChange" hello="hello">新的一周开始啦~</child>
    `
  })
  app.component('child', {
    // 没有获取 context 中的 emit 时，触发change事件方法：this.$emit
    // mounted() {
    //   this.$emit('change')
    // },
    template: `
    <div>
      <slot></slot>
      <div @click="handleClick">今天也是元气满满的一天呀!</div>
    </div>`,
    setup(props, context) {
      const { attrs, slots, emit } = context
      console.log(attrs)
      console.log(slots.default())
      function handleClick() {
        emit('change')
      }
      return { handleClick }
    }
  })
  const vm = app.mount('#root')
</script>
</html>

页面效果：

setup函数context.gif