父子组件
父子组件有两种形式
第一种：在同一个vue文件中
<div id="box">
<!-- 使用组件aaa -->
<aaa></aaa>
</div>
var vm = new Vue({
el:'#box',
components:{
'aaa':{
template: '<h2>我的aaa组件,我有子组件bbb<bbb></bbb></h2>',
components:{
'bbb':{
template: '<h3>我是bbb组件</h3>',
}
}
},
}
});
第二种：在不同vue文件中
子组件
<template>
<div>
child
</div>
</template>
<script>
export default {
name: "child",
props: "someprops",
methods: {
parentHandleclick(e) {
console.log(e)
}
}
}
</script>
父组件
<template>
<div>
<button @click="clickParent">点击</button>
<child ref="mychild"></child>//调用子组件
</div>
</template>
<script>
import Child from './child';
export default {
name: "parent",
components: {
child: Child//注册子组件
},
methods: {
clickParent() {
this.$refs.mychild.parentHandleclick("嘿嘿嘿");//调用子组件方法
}
}
}
</script>
注意：
1、在子组件中：<div></div>是必须要存在的
2、在父组件中：首先要引入子组件 import Child from ‘./child’;
3、 是在父组件中为子组件添加一个占位，ref="mychild"是子组件在父组件中的名字
4、父组件中 components: {}是声明子组件在父组件中的名字
5、在父组件的方法中调用子组件的方法，很重要 this.$refs.mychild.parentHandleclick(“嘿嘿嘿”);
父子组件传值
- 父组件向子组件传值：
parent：
<parent>
<child :message="msg"></child>
</parent>
data(){
return {
msg: "this is parent message"
}
}
child：
<div>
<p>{
{
message}}</p>
</div>
data(){
props:["message"]
}
or
props: {
message: {
type: String, //可指定接收类型，如:Array.
default:"this is default" //可设置默认值
}
}
props: {
message: {
type: Array,
default: ['foo','bar','baz'] //默认值
}
}
注意：parent中的子组件标签中传入的是 :message, (v-bind：”message”)，如果传入的是message=”msg”，那么子组件接收到的是”msg”这个字符串，因为message没有绑定值。
- 子组件向父组件传值
由于在vue中子组件不能更改父组件中的内容，所以可以通过子组件触发事件来传值给父组件。
child：
<template>
<button v-on:click ='setValue'>setValue</button>
</template>
data(){
return {
value: "sendValue"
}
}，
methods:{
setValue:function(){
this.$emit('getdata',this.value);
//this.value为向父组件传递的数据
}
}
parent：
<div id="app">
<child @getdata="receive" ></child>
//自动监听由子组件"注册"的'getdata'事件,然后调用receive方法来更改数据
<p>{
{
value}}</p>
</div>
data(){
return{
value:"default"
}
},
methods: {
receive:function(val) {
this.value = val;
}
}
这时候就可以看到父组件的p标签中的数据更新了
非父子组件之间的通讯
有时候两个非父子关系组件也需要通信。在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线，类似于一个“中转站”，进行发送和接收数据。
Msg.js
import Vue from 'vue'
var Msg = new Vue() //创建事件"中转站"
export default Msg
or
import Vue from 'vue'
export default new Vue
a.vue
<button @click="btnclick">content</button >
// 触发组件 A 中的事件
import Msg from '.../Msg.js'
methods: {
btnclick(message){
Msg.$emit('transfer',this.message); //触发事件
}
}
b.vue
// 在组件B监听事件
<template>
<div>{
{
message}}</div>
</template>
import Msg from '.../Msg.js'
data(){
return{
message:"default"
}
},
created() {
Msg.$on('transfer', function(msg){
//监听事件
this.message = 'msg';
});
}
在数据简单的情况下可以使用中转或者父组件传值给子组件的方法进行传值，在数据比较多而杂的情况下，应该考虑使用专门的状态管理模式 Vuex插件来实现组件间的通讯.
路由传值
发送方：
this.$router.push(`/newsCheck:id=${
id}`);
this.$router.push({
name: "index", params:{
id:res.id}});//name：组件名
this.$router.push({
path: "/index", query:{
id:res.id}});//path：路由名
接收方：
let {
id } = this.$route.params;
or
- 第一种方法 页面刷新数据不会丢失
methods：{
insurance(id) {
//直接调用$router.push 实现携带参数的跳转
this.$router.push({
path: `/particulars/${
id}`,
})
}
注意：需要对应路由配置
{
path: '/particulars/:id',
name: 'particulars',
component: particulars
}
页面获取参数
this.$route.params.id
- 第二种方法 页面刷新数据会丢失
通过路由属性中的name来确定匹配的路由，通过params来传递参数。
methods：{
insurance(id) {
this.$router.push({
name: 'particulars',
params: {
id: id
}
})
}
对应路由配置: 注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了。
{
path: '/particulars',
name: 'particulars',
component: particulars
}
子组件中: 这样来获取参数
this.$route.params.id
- 第三种方法 使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
methods：{
insurance(id) {
this.$router.push({
path: '/particulars',
query: {
id: id
}
})
}
对应路由配置：
{
path: '/particulars',
name: 'particulars',
component: particulars
}
对应子组件: 这样来获取参数
this.$route.query.id
sessionStorage传值
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
语法
window.sessionStorage
保存数据语法：
sessionStorage.setItem("key", "value");
读取数据语法：
var lastname = sessionStorage.getItem("key");
删除指定键的数据语法：
sessionStorage.removeItem("key");
删除所有数据：
sessionStorage.clear();
提示: 如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性， 该数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。
localStorage
语法
window.localStorage
保存数据语法：
localStorage.setItem("key", "value");
读取数据语法：
var lastname = localStorage.getItem("key");
删除数据语法：
localStorage.removeItem("key");