vue封装组件思路_前端封装组件

大家好，又见面了，我是你们的朋友全栈君。

父组件引用子组件,设置props

代码语言：javascript复制

<add tableName="mysql"/>
<add :tableName="mysql"/>
这二个的区别: 1是固定值   2是根据data里面的mysql变量。

Vue子组件调用父组件的方法

代码语言：javascript复制

这里建议采用$emit,方法名灵活。

Vue事件解读之$emit

代码语言：javascript复制

emit想要直接获得父方法的返回值，是无法实现的，但是我们可以在父组件里面
that.$refs.loadMore1.pushData( res.data.listMap );这样把数据放到data里面就可以了。

或者直接用其它的2种方法直接执行父组件

vue 子组件初始化

代码语言：javascript复制

 created () { // 在组件初始化的时候执行，只执行一次
            console.log( this.$data );
            console.log( this );
         }

vue中子组件的methods中获取到props中的值

代码语言：javascript复制

console.log( this.tableName );
console.log( this.getTableName() );

vue中watch不触发、不生效的解决办法及原理
vue 修改 data 数据问题并实时显示的方法

代码语言：javascript复制

这里不能直接在data里面新增数据。
this.$set(this.tableData , 'list' , '123456');
console.log( this.tableData.list ); // 123456
this.$set(this , 'list' , '123456');
console.log( this.list ); // undefined

vue中v-model动态生成的实例详解
JavaScript循环遍历map数据
vue父组件调用子组件方法

vue 组件继承问题

vue2.0 如何自定义组件（vue组件的封装）
详解Vue2.0组件的继承与扩展
vue组件组件的继承extend

vue.js 面向对象编程

0 人点赞