<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
</style>
</head>
<body>
<div id='app'>
<table cellpadding="1" cellspacing="2" border='1px'>
<tr>
<th colspan='3'>父组件数据</th>
</tr>
<tr>
<td>name</td>
<td>keepfull</td>
<td><input type="text" v-model="one"></td>
</tr>
<tr>
<td>age</td>
<td>28</td>
<td><input type="text" v-model="ones"></td>
</tr>
</table>
<v-son :two="one" :twos="ones" @middle1="rua1" @middle2="rua2"></v-son>
</div>
<template id='son'>
<div>
<button @click="go">点我</button>
<table cellpadding="1" cellspacing="2" border='1px'>
<tr >
<th colspan='3'>子组件数据</th>
</tr>
<tr>
<td>name</td>
<td>songdou</td>
<td><input type="text" v-model="two"></td>
</tr>
<tr>
<td>age</td>
<td>20</td>
<td><input type="text" v-model="twos" ></td>
</tr>
</table>
<v-gson :three="two" :threes="twos" ></v-gson>
</div>
</template>
<template id='gson'>
<div>
<table cellpadding="1" cellspacing="2" border='1px'>
<tr >
<th colspan='3'>孙子组件数据</th>
</tr>
<tr>
<td>name</td>
<td>xiaozhu</td>
<td><input type="text" v-model="three"></td>
</tr>
<tr>
<td>age</td>
<td>20</td>
<td><input type="text" v-model="threes"></td>
</tr>
</table>
</div>
</template>
</body>
<script src='vue.js'></script>
<script>
new Vue({
el:"#app",
data:{
one:"我是老大哥",
ones:"我多少岁了"
},
methods:{
rua1(val){
this.one=val;
},
rua1(vall){
this.ones=vall;
}
},
components:{
"vSon":{
props:["two","twos"],//父传数据到子类。
template:"#son",
methods:{
go(){
this.$emit("middle1",this.two);
this.$emit("middle2",this.twos);
}
},
components:{
"vGson":{
props:["three","threes"],//父传数据到子类。
template:"#gson"
},
}
}
//
}
})
</script>
//兄弟组件通信
<div id='app'>
<brother></brother>
</div>
<template id="brother">
<div >
{{msg}}
<button @click="go">点我</button>
</div>
</template>
<template id="sbrother">
<div >
didi
{{msg}}
{{change()}}
</div>
</template>
<script>
let bus=new Vue();
Vue.component("brother",{
template:"#brother",
data(){
return {
msg:"sdfa "
}
},
methods:{
go(){
bus.$emit("suibain",this.msg)
}
}
})
Vue.component("sbrother",{
template:"#sbrother",
data(){
return {
msg:"sdfaadfa "
}
},
created(){//
},//三种用法一样.常用前两种//钩子函数。（你动我就动）自动执行brforeMOUNTED也可以放。destroy钩子函数就是取消联系。只保存原来。不能更改
mounted(){}
methods:{
change(){
//接收
bus.$on("suibian",(val)=>{//this 指向
this.msg=val;
})
}
}
})
//slot(插槽)//
<div id='app'>
{{msg}}
// <table>
// <tr is="rua"></rua>
// </table>
<rua>//了里面的都相当与slot
// <a href="" slot='aa'></a>//可以去名字
//<b slot="bb">slot</b>
<h1>slot</h1>//作用狱.slot可以默认节点.传参的就替换.不传参就默认;
<span></span>
<template slot-scope="conts">
<h1>{{conts.item}}</h1>;\
<span>{{conts.inde}}</span>
</tempalte>//随便绑.是slot下的name:items;作用狱插槽;
</rua>
</div>
<template id="rua">
<div>
// <tr>
// 年后俺都开始
// </tr>
//<h1>woshi rua</h1>
//<slot name='aa'>slot</slot>//name:具名插槽.找具的东西.
<slot v-for="items in arr" :na="items" :ke="inde">//不能用关键字//索引和value
{{items}}
</slot>
</div>
</template>
<script>
new Vue({
data:{
msg:"大厦就是打开就a",
},
components:{
rua:{
template:"#rua",
data(){
return{
arr:["sjin","sdfj ","dsaad "]
}
}
}
}
}).$mount()//手动挂载
</script>//路由
<div id="app">
<router-link to="/first">第一页</router-link>//a
<router-link to="/second">第二页</router-link>
<router-link to="/third"><
<router-view></router-view>//容器
</div>
<template id="one">
<h1>第一页</h1>
</template>
<template id="two">
<h1>第一页</h1>
</template>
<template id="three">
<h1>第一页</h1>
</template>
//路由:跳转：当前页面（单页面跳转。淘宝）
<script src="vue.js"></script>
<script src="../vue-router.js"></script>
<script>
let Fir=Vue.compontent("first",{//为了能拿到。起名字
template:"#one"
}),
let Sec=Vue.compontent("two",{//为了能拿到。起名字
template:"#two"
}),
let Tir=Vue.compontent("three",{//为了能拿到。起名字
template:"#three"
}),
//配置
let route={
{path:"/first",component:Fir}//路径和那个
{path:"/second",component:Sec}
{path:"/thrid",component:Tir}
},
let router=new Vue Router({
router:route
}),//渲染的页面原来就是ａ标签
new Vue({
el:"#app",
router
})
</script>
</html>