父子组件 踩坑记录

标签：xxxx   mit   round   child   记录   ons   label   watch   this   

首先说一下父子组件 传参，接参

第一步。导入子组件 

例

// const auditTrace_a = () => import (‘./auditTrace‘)异步
import auditTrace_a from ‘./auditTrace‘ //同步导入

第二步。组件引用

components: {auditTrace_a,}

第三步 ,父页面

传参(:auditTrace)  接子组件返回的参(@name  test1是个方法)

例1 <auditTrace_a :auditTrace="this.record.procured" class="chart1-1-1" ref="procuredAuditTrace" @name="test1"></auditTrace_a>

 例2  这里 我用的tabs <el-tab-pane label="xxxxxx清查" name="dtb01"><dtb01 v-if="childrens.length>0" :key="timer" :params="queryParams"></dtb01></el-tab-pane>

 　　问题1：当第一次打开父的页面时，子组件接不到父组件传过来的值 解决：加 v-if="childrens.length>0"  , data里默认一个 childrens：[] ,当父组件初始化的时         候 this.childrens.push(1)

　　问题2：改变父组件里的值得时候，子组件并没有刷新 created 和mounted函数都没有执行 watch 也监听不到  ，这时候 :key  是用来 给vue 元素渲染的时候用的，每次渲染的时候会去拿这个key 值做对比，如果这一次的key 值和上一次的key值是不一样的才会重新渲染dom 元素，否则保持上一次的元素状态。

解决 ：key   data 里定义 timer  然后在操作的函数里   this.timer = new Date().getTime()    这样子组件的created会每次都刷新

第四步 子组件

页面

<div ref="auditTraceBar" @click="uu" :style="{width: this.auditTrace.width, height: this.auditTrace.height}"></div>

接受父组件的参数 ：

props: {
  auditTrace: {
    type: Object
  },
},

拿值 ：this.auditTrace.width

传参到父组件：

uu(){
  this.$store.state.newBankName = ‘中国银行‘
  console.log(this.$store)
/*  this.$store.dispatch(‘updateCountAsync‘,{
  num:5
  ,time:2000
})*/
this.Store({
  state:{
    name:"李四"
  }
})
  this.$emit(‘name‘,"张三")// 触发
},

父子组件 踩坑记录

标签：xxxx   mit   round   child   记录   ons   label   watch   this   

原文地址：https://www.cnblogs.com/indexs/p/14754151.html