怎么办？怎么才能让row悄悄给col传值？用mounted钩子函数！

父子组件里钩子函数执行顺序

created()这个钩子表示在内存中生成对象，类似于const div = document.createElement('div')

mounted()这个钩子表示把对象挂载在页面上, 类似于 document.body.appendChild(div)

我们再来分析一下父组件row 和子组件 col 的created和Mounted的执行顺序：

分别在两者的钩子函数里打log可以得到：

所以，顺序就是，先在内存里创建爸爸，再在内存里创建儿子，然后把儿子挂到爸爸身上，然后把爸爸挂到body上

所以我们可以利用这一特点，在父组件的mounted函数里，找到儿子，然后把数据传给他

row.vue
mounted() {
      this.$children.forEach((vm)=>{
        vm.$data.gutter = this.gutter
实现响应式
目标：在不同的页面宽度实现不同的布局
方法是传入一个phone 对象，里面覆盖已有的span和offset
			<m-row gutter="20">
				<m-col span="4" offset="2" :phone="{span:12, offset:4}">1</m-col>
				<m-col span="20" offset="2" :phone="{span:12, offset:4}">2</m-col>
			</m-row>
我们需要判断传入的对象是否是{span:xxx, offset:xxx}的子集
@Prop({
      validator(value: Record<string, number | string>) {
        const keys = Object.keys(value);
        let valid = true;
        keys.forEach(key => {
          if (!['span', 'offset'].includes(key)) {
            valid = false;
        return valid;
    }) phone: Record<string, number | string> | undefined;
本文为fjl的原创文章，著作权归本人和饥人谷所有，转载务必注明来源
  
分类：
 前端
 
标签：
 
前端Vue.js
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装