① vue 子父组件相互调用的方法 2018-11-09
以下内容只是我个人学习时的记录，可能与实际有偏差，大佬勿怪
1传值（父传子）
父组件给子组件传值 借助 props
父组件：
传一个叫做 put_child 的变量给子组件
子组件：
子组件在 props 中定义接受的变量，然后就能使用
2传值（子传父）
子组件给父组件传值，通过 $emit
父组件：
在父组件中绑定一个属性,同时定义一个方法接受，子组件发送过来的数据
子组件：
调用 $emit 传给父组件上绑定的属性，剩下的就是父组件处理了
3.调用方法(子调父)
目前只掌握了，同$emit传值给父一样,同上这里就不写出了
4.调用方法(父用子)
父组件：
在父组件中 ref 属性 定义一个变量，当我使用 this.$refs.变量 会把子组件对象返回，这样我们就可以调用子组件的方法
② vue兄弟组件之间方法调用
方法一：
父组件 index.vue 中含有两个兄弟组件 business.vue 及 detail.vue
当 business.vue中主协办分配选择完成后 需要刷新 detail.vue中的数据
在父组件中 的 business.vue组件上 定义触发的方法 <business @updateDate='updateDate'></business>
在父组件中 的 detail.vue组件上 定义触发的方法 < detail.vue ref='detail'></detail>
在兄弟组件中 主协办分配选择完成后showUserAssignData方法去触发父组件 index.vue的updateDate方法
在父组件中 updateDate方法去触发detail.vue组件中刷洗数据的方法
方法二：采用公共bus方法---js方法
第二个子组件需要调用第二个子组件方法
在main.js中 注册一个公共实例并绑定到原型上
Vue.prototype.$bus = new Vue()
在第一个子组件中注册一个方法 在created 或者mounted中注册
在兄弟组件中触发该方法
③ vue中父组件调用子组件的方法
方法一：通过ref直接调用子组件的方法；
方法二：通过$Children调用子组件方法(不推荐，获取到的可能不是index对应的)
④ vue直接在父组件中调用子组件的方法
方法一：
//父组件中
引入子组件 然后点击调用子组件方法
<template>
<div class="container">
<h1 @click="handleClick" style="text-align: center">Musxc</h1>
<LineChart ref="child" ></LineChart>
</div>
</template>
<script>
import LineChart from "../components/LineChart.vue";
export default {
components: {
LineChart,
},
methods: {
handleClick() {
this.$refs.child.sing();
},
},
};
</script>
//子组件中
我是子组件
export default {
methods: {
sing() {
console.log('我是子组件的方法');
},
},
};
成功的调用了子组件的方法
方法二：通过组件的$emit、$on方法；
//父组件中
点击调用子组件方法
import Child from './child';
export default{ methods: { handleClick() { this.$refs.child.$emit("childmethod") //子组件$on中的名字 },
},
}//子组件中
我是子组件
export default {
mounted() {
this.$nextTick(function() {
this.$on('childmethods',function() {
console.log('我是子组件方法');
});
});
},
};