父组件传子组件:
父组件:
<headerVue custom="test"></headerVue> //custom自定义的一个属性;test准备传入子组件的值
子组件:
export default { props:["custom"] //需要引入传过来的值custom;那么custom就可以直接使用了{{custom}} }
这样父传子,就完成了。
子组件传父组件:
1.父组件和子组件需要连接:connect.js(用一个js文件链接)
import Vue from "vue" var connect = new Vue(); export default connect;
2.父组件做好接受和需要的事件
import connect from "./components/connect.js" //引入链接的js的文件
export default { methods:{ accept(){ //条件满足后执行accept准备接受值! connect.$on("value",function(msg,b){ //value一定要和后面子组件传的名称一样;参数msg,b和子组件传的值一一对应 console.log(b); }) } } }
3.子组件发送值
import connect from "./connect.js" //引入链接的js,让父组件和子组件链接一起 export default { methods:{ sendOut(){ //执行sendOut传值给父组件 connect.$emit("value","test","test1") //传值 } } }
这个connect.js可以复用!多个组件都可以公用,但是需要注意value这个值,一定不能一样,不然会数据会变得乱,具体杂乱可以试试看!
主要就是用来记录,下回看到自己的,让自己也能看懂!