vue3.0系列（vue2.6-cli3.x）组件传参（子到父）

父组件

;(function () {
    const template = `

        
    
    
        
        
        
        
    
        
Section title
        

      
`

    window.AppHome = {
        template, // template: template,

        data () { // alt+shift 
            return {
                hobbies: ['coding', '睡觉', '打豆豆', '看书'],
                empList: [
                    {id: 1, name: '小梦1', salary: '80001'},
                    {id: 2, name: '小梦2', salary: '80002'},
                    {id: 3, name: '小梦3', salary: '80003'},
                    {id: 4, name: '小梦4', salary: '80004'},
                    {id: 5, name: '小梦5', salary: '80005'}
                ]
            }
        },

        methods: {
            // 删除某个员工
            // 因为删除 emp 会对 empList 做更新操作
            // 而这个 empList 初始化在当前组件中，所以删除 的函数需要定义在这个组件里面
            deleteEmp (index) {
                this.empList.splice(index, 1)
            },
            deleteHobby (index) {
                this.hobbies.splice(index, 1)
            }
        },

        components: { //Dashboard 作为AppHome 的子组件
            Dashboard, // Dashboard: Dashboard
            HomeList // HomeList:HomeList
        }
    }
})()

子组件

;(function () {
    const template = `


      

        
        
{{hobby}}
        
          删除
        
      
    
  
`

    window.Dashboard = {
      // 声明当前子组件接收父组件传递的属性
        props: ['hobbies'],
        methods: {
          deleteHobby (index) {
            // 删除点击 的这个爱好 
            // 触发父组件中 delete_hobby 事件进行删除操作
            this.$emit('delete_hobby', index)
          }
        },
        template // template: template
    }
})()

this.$emit(‘delete_hobby’, index) 触发父组件的事件