父子组件给子组件传值
第一步:爸爸将数据递给儿子,所以我们就需要在子组件绑定父组件的数据
第二步:爸爸都已经将数据给你了,那么你就要礼貌性的伸手去拿,这时我们可以利用props去接爸爸传过来的值
第三步:当你拿到值的时候,就可以随意发挥数据的作用啦
代码如下:
父组件:<template><div id="app"><chuanzhi :fatherdata='data'></chuanzhi> //绑定父组件的数据</div></template><script>import Chuanzhi from './components/chuanzhi'export default {name: 'App',data() {return {data:'哈喽~我是父组件的数据'}},components:{Chuanzhi}}</script>子组件:<template><div><p> {{ fatherdata }} </p> //展示父组件的数据</div></template><script>export default {props:{//使用props接受父组件的数据fatherdata:{type:String //限制拿到父组件数据的数据形式,这里为字符串型的数据}}}</script>
子组件给父组件传值
第一步:给子组件绑定一个事件,利用触发事件给父组件传值,这里利用this.$emit将事件和数据传递过去
第二步:子组件绑定好事件之后,父组件需要时刻监听着子组件的变化(使用v-on监听),一旦发生改变,就可以进行相关操作,并以此获得数据
代码:
父组件:<template><div id="app"><chuanzhi @senddata='getdata'></chuanzhi> //监听的事件<p> {{ sondata }}</p></div></template><script>import Chuanzhi from './components/chuanzhi'export default {name: 'App',data() {return {sondata:''}},components:{Chuanzhi},methods: {getdata(value) {this.sondata = value //事件一旦触发,便可将子组件的数据拿到手啦}}}</script>子组件:<template><div><button @click='change'>发送子组件的数据</button> //绑定一个点击事件,一旦触发,父组 件便可以监听到,然后进行相关的操作</div></template><script>export default {data() {return{message:'哈喽~我是子组件的数据'}},methods: {change() {this.$emit('senddata',this.message) //使用this.$emit给父组件传递事件和参数,第一个事件,第二个是参数,第一个事件名就是父组件监听的事件名}}}</script>