子组件代码 const compoent = { props: { active: Boolean, desc: String // desc: { // type: String, // required: true // } }, template: ` <div> <input type="text" v-model="text"></input> <span v-show="active">{{desc}}</span> </div> `, data () { return { text: 0 } }, mounted () { console.log('子组件挂载完成'); console.log(this.$parent); // 获得父组件 console.log(this.$parent.$options.name); // 获得父组件name } }
Vue.extend() 扩展方式： ``` // Vue.extend 扩展出来的组件，如果需要修改 props 中的值，需要重新声明 propsData 对象才可以修改，重新声明 data 则可以直接覆盖内部的 data 对象。 // 内部同时实现挂载方法 mounted() ，会发现这两个方法都会被调用，先调用子组件里面的 mounted() 然后在调用扩展组件里面实现的 const compVue = Vue.extend(compoent)
// 方式一: new compVue({ el: '#app', propsData: { active: true, desc: "dzm" }, data:{ text: 'dzm' }, mounted () { console.log('扩展组件挂载完成'); } })
// 方式二: new Vue({ el: '#app', components: { comp: compVue }, template: ' ' }) ```
extends: compoent 扩展方式： ``` // 扩展 const compoent2 = { extends: compoent, data () { return { text: "dzm" } }, mounted () { console.log('扩展组件挂载完成'); } }
new Vue({ name:'root', el: '#app', components: { comp: compoent2 }, data:{ active: true, desc: 'dzm' }, template: ' ' }) ```
