【composition-api】学习第一步-只针对工作不针对学习

1:下载composition-api并且导入(哪个页面用就在页面写)

1.1:在main.js中引入

import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

1.2:在业务组件中引入(需要用到什么就导入什么)

import { ref } from '@vue/composition-api'

2:在工作中使用首先需要了解setup

2.1:setup的第一个参数 props

1. props 就是vue2的props,但是它现在是一个大对象,需要解构出来或者props.xxx来使用

2.2:setup的第二个参数context(含三个小的参数)

1. attrs：所有的非prop的attribute,其实就是v-bind="$attrs",传给子组件的数据
2. slots：父组件传递过来的插槽
3. emit：当我们组件内部需要发出事件时会用到emit(这个必须解构出来,因为这个是代替以前的tthis.$emit(‘事件名’))

3:查看解构setup中的参数

<script>
import { ref } from '@vue/composition-api'
export default {
  name: 'SpatialAnalysis',
  components: { spaceDetails },
  props:{
	chartObject: {
      type: Object,
      required: true
    }
  }
  setup (props,{emit}) {
  	function output(){
		console.log(props.chartObject)
		emit('向父组件发送事件')
 	 }
  	return{
  		output //必须return出去,不管是变量还是函数
  	}
  }

下一章表述日常的使用到的生命周期以及监听计算属性