Vue基础精讲 —— Vue的组件之组件的定义、继承、自定义双向绑定、高级属性

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

see me if active

`,

data () {

return {

text: 0

}

},

mounted () {

console.log(‘compoent1 comp mounted’)

},

methods: {

handleChange () {

this.$emit(‘change’)

}

}

}

const componet2 = {

extends: compoent, // 继承compoent

data () {

return {

text: 1

}

},

mounted () {

console.log(‘componet2’, this.$parent.$options.name)

}

}

// const CompVue = Vue.extend(compoent)

// new CompVue({

// el: ‘#root’,

// propsData: {

// propOne: ‘xxx’

// },

// data: {

// text: ‘123’

// },

// mounted () {

// console.log(‘instance mounted’)

// }

// })

const parent = new Vue({

name: ‘parent’

})

new Vue({

parent: parent, // 设置父组件

name: ‘Root’,

el: ‘#root’,

mounted () {

console.log(‘Root’, this.$parent.$options.name)

},

components: {

Comp: componet2

},

data: {

text: ‘组件1’

},

methods: {

change () {

console.log(‘kkkkk’)

}

},

template: `

{{text}}

<comp propOne=“propOne” @change=“change”>

`

})

组件继承的执行顺序

Vue自定义组件双向绑定

============

import Vue from ‘vue’

const component = {

// 使用model

model: {

// prop，子组件接收父组件通过v-model传递过来的值，可重命名为value22

prop: ‘value22’,

// event，该组件在派发emit ‘change’ 事件的时候，传递参数的值就是父组件v-model能够收到的值。

event: ‘change’

},

props: [‘value22’], // model中得到的prop值

template: `

<input type=“text” @input=“handleInput” :value=“value22”>

`,

methods: {

handleInput (e) {

// change为model中的event

this.$emit(‘change’, e.target.value)

}

}

// 若不使用model接收父组件传参

// props: [‘value’], // 必须要使用value

// template: `

//

//

// <input type=“text” @input=“handleInput” :value=“value”>

//

// `,

// methods: {

// handleInput (e) {

// // 这儿必须用input发送数据，发送的数据会被父级v-model接收

// this.$emit(‘input’, e.target.value)

// }

// }

}

new Vue({

components: {

CompOne: component

},

el: ‘#root’,

data () {

return {

value11: ‘123’

}

},

template: `

`

})

Vue组件高级属性

==========

import Vue from ‘vue’

const ChildComponent = {

template: ‘

child component: {{data.value}}

’,

inject: [‘yeye’, ‘data’], // 跨级组件沟通

mounted () {

// console.log(this.yeye, this.value)

}

}

const component = {

name: ‘comp’,

components: {

ChildComponent

},

// template: `

//

//

//

//

//

//

//

//

// `,

template: `

`,

data () {

return {

style: {

width: ‘200px’,

height: ‘200px’,

border: ‘1px solid #aaa’

},

value: ‘component value’

}

}

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

`,

data () {

return {

style: {

width: ‘200px’,

height: ‘200px’,

border: ‘1px solid #aaa’

},

value: ‘component value’

}

}

总结

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-Verk5rls-1715836472267)]