父组件传递数据msg给子组件
父组件: 在子组件上通过绑定:childmsg="msg" 来传递给子组件
<template> <div id="father"> <div class="el-lab">父传子:</div> <input placeholder="向子组件传递数据" v-model="msg"/> </div> <Child :childmsg="msg" ></Child> </div> </template> <script> import Child from './child1.vue' export default { data(){ return { msg: '从父组件过来的数据', } }, components: { Child }, } </script>
子组件接收父组件传过来的msg
子组件:通过props:['childmsg']的方式来接收
<template> <div id="child1"> <h4>子组件1</h4> <p>接收父穿过来的数据:{{childmsg}}</p> </div> </template> <script> export default { props: ['childmsg'], data(){ return { } }, } </script>
子组件传递数据给父组件
子组件:通过this.$emit('sendTo',this.msg)创建一个sendTo的响应方式
<template> <div id="child1"> <div class="box"> <h4>子组件</h4> <div class="input-1"> <div class="el-lab">子传父:</div> <input class="ch-in" placeholder="向父组件传递数据" v-model="msg" @keyup="tofa" /> </div> </div> </div> </template> <script> export default { data(){ return { msg: '', } }, mounted(){ }, methods: { tofa(){ this.$emit('sendTo',this.msg) } } } </script>
父组件接收子组件传过来的msg
父组件:在子组件上绑定@sendTo=getMsg来接收子组件传递过来的msg并赋给父组件的msg
<template> <div id="father"> <div class="input-1"> <div class="el-lab">接收子:{{msg}}</div> </div> <Child @sendTo="getMsg"></Child> </div> </template> <script> import Child from './child1.vue' export default { data(){ return { msg: '', } }, components: { ChildOne }, mounted(){ }, methods: { getMsg(msg){ this.msg = msg } } } </script>