How to use vue components for data transfer
May 29, 2018 pm 05:52 PMThis time I will show you how to use vue components for data transfer, and what are the precautions for using vue components for data transfer. The following is a practical case, let's take a look.
Vue's component scopes are all isolated and do not allow directreferences to the data of the parent component in the template of the child component. Specific methods must be used to transfer data between components. There are roughly three situations in which data is passed between components:
The parent component passes data to the child component, and the data is passed through props. The child component passes data to the parent component and passes the data through events. Transfer data between two sibling components through event bus.
1. Parent component passes data to child component
Child component part:<template> <p class="child"> {{ msg }} </p> </template> <script> export default { name: 'child', data(){ return { } }, props: ['msg'] </script>
<template> <p class="child"> child <child :msg="message"></child> </p> </template> <script> import child from './child.vue' export default { name: 'parent', components: { child }, data () { return { message: 'hello vue' } } } </script>
Single data flow
When the message of the parent component changes, the child component will automatically update the Method 1: Assign prop to a local variable, and then modify the local variable if you need to modify it, without affecting propexport default { data(){ return { newMessage: null } }, props: ['message'], created(){ this.newMessage = this.message; } }
export default { props: ['message'], computed: { newMessage(){ return this.message + ' 哈哈哈'; } } }
2. The child component passes data to the parent component
The subcomponent mainly passes data to the parent component through practice. The subcomponent part:<template> <p class="child"> <span>用户名:</span> <input v-model="username" @change="sendUser" /> </p> </template>
event to call sendUser.
<script> export default { name: 'parend', data () { return { username: '' } }, methods: { sendUser () { this.$emit('changeName', this.username) } } } </script>
<template> <p class="parent"> <child @changeName="getUser"></child> <p>用户名:{{user}}</p> </p> </template>
<script> import child from './child.vue' export default { name: 'parent', components: { child }, data () { return { user: '' } }, methods: { getUser(data) { this.user = data } } } </script>
3. Data transfer between components at the same level
Sometimes two components also need to communicate (non-parent-child relationship). Of course Vue2.0 provides Vuex, but in simple scenarios, an empty Vue instance can be used as the central event bus.<template> <p id="app"> <c1></c1> //组件1 <c2></c2> //组件2 </p> </template>
<template> <p class="c1"> page <button @click="changeMsg">click</button> </p> </template> <script> var Bus = new Vue(); //为了方便将Bus(空vue)定义在一个组件中,在实际的运用中一般会新建一Bus.js export default { name: 'c1', data () { return { message: 'hi' } }, methods: { changeMsg () { //点击按钮,将this.message传递给c2 bus.$emit('sendMsg', this.message) } } } </script>
<template> <p class="c2"> {{msg}} </p> </template> <script> var Bus = new Vue(); export default { name: 'c2', data () { return { msg: '' } }, created () { bus.$on('sendMsg',(data)=>{ //data即为c1组件中的message this.msg = data }) } } </script>
//Bus.js import Vue from 'vue' const Bus = new Vue() expore default Bus
Practical application:
import Vue from 'vue' const Bus = new Vue() var app= new Vue({ el:'#app', data:{ Bus } })
this.$root.Bus.$on() in the subcomponent , this.$root.Bus.$emit() to call
How to use WebPack to configure vue multi-page
How to use the Node.js sandbox environment
The above is the detailed content of How to use vue components for data transfer. For more information, please follow other related articles on the PHP Chinese website!

Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Use ddrescue to recover data on Linux

Open source! Beyond ZoeDepth! DepthFM: Fast and accurate monocular depth estimation!

How to use Excel filter function with multiple conditions

Google is ecstatic: JAX performance surpasses Pytorch and TensorFlow! It may become the fastest choice for GPU inference training

The vitality of super intelligence awakens! But with the arrival of self-updating AI, mothers no longer have to worry about data bottlenecks

Slow Cellular Data Internet Speeds on iPhone: Fixes

The first robot to autonomously complete human tasks appears, with five fingers that are flexible and fast, and large models support virtual space training

The U.S. Air Force showcases its first AI fighter jet with high profile! The minister personally conducted the test drive without interfering during the whole process, and 100,000 lines of code were tested for 21 times.
