Method of assembly by value:
A parent component data transfer (The props) to subassembly
1: The parent component should be introduced subassembly
import nav2Children from './nav2Children.vue'
import zjOne from './public/zjOne.vue'
Introducing components: Components: { 'nav2C': nav2Children, 'zjOne':} zjOne
Variable Definition: content: {}, title: "",
html part of writing:
2: The props data receiving sub-assembly (Note that the variable of the type required for correspondence is received)
props: {'data': Object, title: String},
console.log(data)/console.log(title)
Second, the data is transmitted to the parent sub-assembly component (subassembly mainly through the event data passed to the parent component)
Sub-component parts:
<button @click="goback">子组To父组</button>
First, declare a method goback, with a click event to call goback
goback: function () {
this.$emit('transferTitle ', this.title)
}
In goback using the $ emit to traverse transferTitle event and return this.title
TransferTitle event which is a custom function similar to a transit, this.title will be passed to the parent component through this event
Sub-component parts:
Here you can also simply written as: @ transferTitle = "activated"
In the parent component, declare a method activated, calls activated method transferTitle events, to get transferred from the sub-assembly over parameter title
// received value transmitted subassembly
activated: function (data) {
console.log(data);
this.name = data;
},
Three, vue mass difference parameters params routing and query in two ways
Page traditional values: router-link frames, or by query params
NOTE: The difference is that two or more writing can first query, params, the second only by Query, because, the params name can only be used to introduce route, such a method may be:
this.$router.push({
name:"nav1Children",
params:{userId:'formV',code:10011}
});
Page received value:
(1)this.$router.currentRoute.query.userId;
(2)this.$route.query.userId;
(3)this.$route.params.userId;
It should be noted here:. This $ router.currentRoute equivalent to this $ route.
Show the difference:
query：
params:
ajax query is more similar to what we get in mass participation, params is similar to the post, and then said simply, former parameters to appear in the browser address bar, the latter will not be displayed
Fourth, cross-page spread value is also used query or localStorage, query as above
localStorage is a window on. So no need to write this.localStorage, this you here refers vue instance.
Option One,
存储：localStorage.data = JSON.stringify(data.body.data);
获取：JSON.parse(localStorage.data);
方案二、
存储：localStorage.setItem('data',JSON.stringify(data.body.data));
获取：JSON.parse(localStorage.getItem('data'));
五、组件与组件之间的传值还有一种方法event bus
这里来看一个简单的例子：
比如，我们这里有三个组件，main.vue、click.vue、show.vue。click和show是父组件main下的兄弟组件，而且click是通过v-for在父组件中遍历在了多个列表项中。这里要实现，click组件中触发点击事件后，由show组件将点击的是哪个dom元素console出来。
首先，我们给click组件添加点击事件
<div class="click" @click.stop.prevent="doClick($event)"></div>
首先创建出我们的eventBus，我们把它命名为bus.js
import Vue from 'vue';
export default new Vue();
这样我们就创建了一个新的vue实例。接下来我们在click组件和show组件中import它。
import Bus from 'common/js/bus.js';
接下来，我们在doClick方法中，来触发一个事件：
doClick(event) {
Bus.$emit('getTarget', event.target);
}
这里我们在click组件中每次点击，都会在bus中触发这个名为'getTarget'的事件，并将点击事件的event.target顺着事件传递出去。
接着，我们要在show组件中的created()钩子中调用bus监听这个事件，并接收参数：
Bus.$on('getTarget', target => {
console.log(target);
});
这样，在每次click组件的点击事件中，就会把event.target传递到show中，并console出来。
所以eventBus的使用还是非常便捷的，但是如果是中大型项目，通信比较复杂，还是建议大家直接使用vuex。
六、子组件向子组件传递数据
Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。