'my-slot':{
template:'#myslot',
data(){
return{
name:'papa',
age:40,
}
}
}, |
<template id="myslot">
<div>
<h3>组件</h3>
<slot name="s1"></slot>
<slot name="s2"></slot>
</div>
</template><!--内容分发-->
<my-slot>
<ul slot="s1">
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
<ul slot="s2">
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</my-slot> |
| 动态模板 |
'myparent':{
template:'#iparent',
data(){
return{
pname:'papa',
page:40,
cname:'',
cage:''
}
}
},
'my-slot':{
template:'#myslot',
data(){
return{
name:'papa',
age:40,
}
}
},<template id="iparent">
<div>
<p>父组件的姓名{{pname}},父组件的年龄{{page}}</p>
<p>子组件的姓名{{cname}},子组件的年龄{{cage}}</p>
<p :message="pname" :message1="page"></p>
</div>
</template><template id="myslot">
<div>
<h3>组件</h3>
<slot name="s1"></slot>
<slot name="s2"></slot>
</div>
</template><button @click="flag='my-row'">row</button>
<button @click="flag='my-slot'">slot</button>
<myparent v-if="flag=='my-row'"></myparent>
<my-slot v-if="flag=='my-slot'">
<ul slot="s1">
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
<ul slot="s2">
<li>11</li>
<li>12</li>
<li>13</li>
</ul>
</my-slot> |
| 动态组件 |
<button @click="flag='my-row'">row</button>
<button @click="flag='my-slot'">slot</button> <component :is="flag"></component> |
| 缓存 |
'my-hello':{
template:'<h3>{{x}}</h3>',
data(){
return {
x:Math.random()
}
}
},
'my-hello1':{
template:'<h3>{{y}}</h3>',
data(){
return {
y:Math.random()
}
}
}<!--缓存非活动组件-->
<button @click="flag1='my-hello'">hello</button>
<button @click="flag1='my-hello1'">hello1</button>
<keep-alive>
<component :is="flag1"></component>
</keep-alive> |
| 父将参数传给子 |
components:{
'myparent':{
template:'#iparent',
data(){
return{
pname:'iparent',
page:30,
cname:'',
cage:''
}
},
components:{
'mychild':{
template:'#ichild',
props:["message","message1"],
data(){
return{
cname:'ichild',
cage:'10'
}
}
}
}
}
}
<template id="iparent">
<div>
<h2>父组件，调用自己定义的姓名{{pname}}，调用自己的年龄{{page}}</h2>
<h2>父组件，调用子组件定义的姓名{{cname}}，调用自己的年龄{{cage}}</h2>
<mychild :message="pname" :message1="page"></mychild>
</div>
</template>
<template id="ichild">
<div>
<p>父组件的姓名{{message}},父组件的年龄{{message1}}</p>
<p>子组件的姓名{{cname}},子组件的年龄{{cage}}</p>
</div>
</template><div id="my">
<myparent></myparent>
</div> |
| 子将参数传给父 |
<template id="iparent">
<div>
<h2>父组件，调用自己定义的姓名{{pname}}，调用自己的年龄{{page}}</h2>
<h2>父组件，调用子组件定义的姓名{{cname}}，调用自己的年龄{{cage}}</h2>
<mychild :message="pname" :message1="page" @e-child="subData"></mychild>
</div>
</template>
<template id="ichild">
<div>
<p>父组件的姓名{{message}},父组件的年龄{{message1}}</p>
<p>子组件的姓名{{cname}},子组件的年龄{{cage}}</p>
<button @click="send">传参数给父</button>
</div>
</template>
<body>
<div id="my">
<myparent></myparent>
</div>components:{
'myparent':{
template:'#iparent',
data(){
return{
pname:'iparent',
page:30,
cname:'',
cage:''
}
},
methods:{
subData(name,age){
this.cname=name;
this.cage=age;
}
},
components:{
'mychild':{
template:'#ichild',
props:["message","message1"],
data(){
return{
cname:'ichild',
cage:'10'
}
},
methods:{
send(){
console.log(this);
this.$emit('e-child',this.cname,this.cage);
}
}
}
}
}
} |
| 非父子之间数据传递 |
var bus =new Vue();
var toA={
template:"#A",
data(){
return{
name:'sonia'
}
},
methods:{
send(){
bus.$emit('data-a',this.name);
}
}
};
var toB={
template:"#B",
data(){
return{
age:25
}
},
methods:{
send(){
bus.$emit('data-b',this.age);
}
}
};
var toC={
template:"#C",
data(){
return{
name:'',
age:''
}
},
methods:{
},
mounted(){
bus.$on('data-a',name=>{
this.name=name;
});
bus.$on('data-b',age=>{
this.age=age;
})
}
};components:{
'data-a':toA,
'data-b':toB,
'data-c':toC
}<template id="A">
<div>
<p>{{name}}</p>
<button @click="send">将姓名发送给C</button>
</div>
</template>
<template id="B">
<div>
<p>{{age}}</p>
<button @click="send">将年龄发送给C</button>
</div>
</template>
<template id="C">
<div>
<p>{{name}} {{age}}</p>
</div>
</template>
<body>
<div id="my">
<data-a></data-a>
<data-b></data-b>
<data-c></data-c>
</div> |
send(){
axios({
method:get,
url:'http://localhost:3000/info'
}).then(function(response){
console.log(response.data)
}).catch(resp=>{
console.log("请求失败"+resp)
})
},
sendGet(){
axios.get('http://localhost:3000/info',{
params:this.person
}).then(function(response){
console.log(response.data)
}).catch(resp=>{
console.log("请求失败"+resp)
})
},
sendPost(){
axios.post('http://localhost:3000/info',this.person,{
transformRequest:[
function(data){
let str='';
for(let index in data){
console.log(index);
str+=index+'='+data[index]+'&';
}
str=str.substring(0,str.length-1);
return str;
}
]
}).then(function(response){
console.log(response.data)
}).catch(resp=>{
console.log("请求失败"+resp)
})
}
|