思路1：就是让利用v-if的重新渲染机制
1.首先考虑的就是手动刷了，给组件加个v-if=”someShow“;
2.在父组件添加如下方法;
//  这是组件上写法 ：
// 下边写在父组件的methods里
refesh:function(){
this.someShow=false;
var _this=this;
this.$nextTick(function(){
_this.someShow = true;
})
}
// $nextTick
// $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM  这样重新渲染就会是最新数据了
这样就完美解决了不更新的问题。、
思路2：利用watch监听
在子组件中监听你要的数据，当然别监听对象，监听了不一定好使。亲测不好使，测过好使的，可以给我留言。
data:function(){
return {
title:"",
content:"",
btn:""
}
},
methods:{
changeTitle:function(){
this.title=this.listTitle;
// 这里的每次变化了就复制给组件上的变量，视图也就更改了
},
changeList:function(){
this.content=this.listList;
},
changeBtn:function(){
this.btn=this.listBtn;
}
},
watch:{
listTitle:"changeTitle",
listList:"changeList",
listBtn:"changeBtn"
// 冒号前边这个就是从父组件传过来的，后边的就是变化了的监听函数
}

1、父亲页面的监听事件一定要写在组件上（子组件），否则监听不到

2、$emit的事件名称以及父组件监听的对象不能有大写，驼峰命名法要改用“-”连接

对于基础弱的小伙伴一定要多看几遍vue的官方文档，不说了，我先看了

思路1：就是让利用v-if的重新渲染机制

1.首先考虑的就是手动刷了，给组件加个v-if=”someShow“;

2.在父组件添加如下方法;

//  这是组件上写法 ：<my-component v-if="someShow"></my-component>

// 下边写在父组件的methods里
refesh:function(){
	this.someShow=false;
	var _this=this;
	this.$nextTick(function(){
		_this.someShow = true;
	})
  
}
// $nextTick
// $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM  这样重新渲染就会是最新数据了

这样就完美解决了不更新的问题。、

思路2：利用watch监听

在子组件中监听你要的数据，当然别监听对象，监听了不一定好使。亲测不好使，测过好使的，可以给我留言。

    data:function(){
		return {
			title:"",
			content:"",
			btn:""
		}
	},   
     methods:{
		changeTitle:function(){
			this.title=this.listTitle;
            // 这里的每次变化了就复制给组件上的变量，视图也就更改了			
		},
		changeList:function(){
			this.content=this.listList;
		},
		changeBtn:function(){
			this.btn=this.listBtn;

		}
	},
	watch:{
		listTitle:"changeTitle",
		listList:"changeList",
		listBtn:"changeBtn"
		// 冒号前边这个就是从父组件传过来的，后边的就是变化了的监听函数
	}

 

目录

 

（1）vue中父组件调用子组件函数

（2）vue中子组件调用父组件函数

（1）vue中父组件调用子组件函数

用法： 子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.getMethod 去调用子组件的getMethod方法

详解： 父组件里面调用子组件的函数，父组件先把函数/方法以属性形式传给子组件；那么就需要先找到子组件对象 ，即 this.$refs.refName.

然后再进行调用，也就是 this.$refs.refName.getMethod

子组件：

    <template>
      <div>
        childComponent
      </div>
    </template>
     
    <script>
      export default {
        name: "child",
        methods: {
          childClick(e) {
            console.log(e)
          }
        }
      }
    </script>


父组件：

    <template>
      <div>
        <button @click="parentClick">点击</button>
        <Child ref="mychild" />   //使用组件标签
      </div>
    </template>
     
    <script>
      import Child from './child';   //引入子组件Child
      export default {
        name: "parent",
        components: {
          Child    // 将组件隐射为标签
        },
        methods: {
          parentClick() {
            this.$refs.mychild.childClick("我是子组件里面的方法哦");  // 调用子组件的方法childClick
          }
        }
      }
    </script>


（2）vue中子组件调用父组件函数

方法一：

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

父组件：

    <template>
      <div>
        <child></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
      };
    </script>

子组件

    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            this.$parent.fatherMethod();
          }
        }
      };
    </script>

方法二：

在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了

父组件

    <template>
      <div>
        <child @fatherMethod="fatherMethod"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
      };
    </script>

子组件

    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            this.$emit('fatherMethod');
          }
        }
      };
    </script>

方法三

把方法传入子组件中，在子组件里直接调用这个方法

父组件

    <template>
      <div>
        <child :fatherMethod="fatherMethod"></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
      };
    </script>

子组件

    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        props: {
          fatherMethod: {
            type: Function,
            default: null
          }
        },
        methods: {
          childMethod() {
            if (this.fatherMethod) {
              this.fatherMethod();
            }
          }
        }
      };
    </script>