vue内容分发与非vuex式组件通信

一、父组件的内容可以分发到子组件中去。

1、匿名方式

父组件引入子组件，在子组件中加入slot标签，父组件中的内容会加入到子组件的slot标签中。

父组件：

<template>
<h1>王者荣耀</h1>
<h2>王者农药</h2>
</template>

子组件：

<div>
<h4>游戏</h4>
<slot></slot>
</div>

这样，父组件的内容就会默认的加入到子组件的slot中去。

2、具名方式

父组件中给需要分发内容的标签加入一个slot属性，设置其名称，例如

<h1 slot="k1">王者荣耀</h1>
<h2 slot="k2">王者农药</h2>

子组件中写入

<div>
<h4>游戏</h4>
<slot name="k1"></slot>
<slot name="k2"></slot>
<slot></slot>
</div>

相对应的k1和k2的标签会分发到子组件的相对应的内容中去。

二、非vuex方式组件通信

子组件传数值给父组件。

在子组件中，写入

<i class="icon-cancel"  @click="close"></i>

methods:{
close:function(){
console.log("click");
this.$emit('closeEditProfile',false);
return false;
}
}

父组件中，引入这个子组件，并且行内写入值来接收参数

<Editprofile v-if="isEditprofile" @closeEditProfile="closeEditProfile"></Editprofile>

components:{
Editprofile
},
data:function(){
return{
isEditprofile:false
}
},

methods:{
showEditProfile:function(){
this.isEditprofile = true;
return false;
},

closeEditProfile:function(){
this.isEditprofile = false;
return false;
}
}

三、数据交互

that.$http.post(sendUrl,sendInfo,{emulateJSON:false}).then(function(res){
// console.log(res);
if(res.body.status == 1){

return false;
}
},function(err){
console.log(err)
})

post body一般情况下有两种，form和json，
form的格式为key和value的形式，key=value&key2=value2，
json的格式为对象的形式，{"key":"value"}，
emulateJSON 值为true是form ，值为false是json，

因此，要向后台传数组，emulateJSON的值应设置为false。