1.Vue.js 中父级和子级间通信（练习）：
<body>
<div id="app">
<father></father>
</div>
<script>
//创建父组件
Vue.component('father',{
data : function(){ //数据层
return {
uname : '这是父组件',
val : 'jack',
inputValue : ''
}
},
methods : {
getSon : function(){
this.inputValue = this.$refs.myChild.myValue
}
},
template : `<div>
<h3>{{uname}}</h3>
<h2>从子组件接收到的数据为：{{inputValue}}</h2>
<hr>
//核心（固定写法）
<son ref='myChild'></son>
</div>`
})
//创建子组件
Vue.component('son',{
data : function(){
return {
uname : '这是子组件',
myValue : ''
}
},
methods : {
setFather : function(){
this.$parent.getSon(); //获取父组件的方法
}
},
template : `<div>
<h4>{{uname}}</h4>
<h3>{{'我的名字为：' + this.$parent.val}}</h3>
请输入：<input type="text" v-model='myValue'/>
<br><br>
<button @click='setFather'>将输入的数据传输到父组件</button>
</div>`
})
//实例
new Vue({
el : "#app",
})
</script>
</body>
2.Vue.js 中兄弟组件之间的通信：
（1）兄弟组件间的通信是通过事件的绑定和触发完成的；
（2）触发：this.$emit(' 事件名 ' , ' 数据 ')；（也就是传输数据）
（3）绑定：this.$on( '与on相对应的事件名' , ' 回调函数 (参数就代表传来的数据) ')；（也就是接收数据）
<body>
<div id="app">
<xiong-da></xiong-da>
<hr>
<xiong-er></xiong-er>
</div>
<script>
//创建一个实例，借助该实例完成事件的绑定和触发
var bus = new Vue();
//创建兄弟组件（老大）
Vue.component('xiong-da',{
methods : {
//自定义一个事件，用来传输数据
tellXiongEr : function(){
bus.$emit('toXiongEr','光头强来了')
}
},
template : `<div>
<h2>我是熊大</h2>
<button @click='tellXiongEr'>点击按钮向熊二传话</button>
</div>`
})
//创建兄弟组件（老二）
Vue.component('xiong-er',{
//专门用来接收数据的方法；
created : function(){
bus.$on('toXiongEr',function(msg){
console.log('\'' + msg + '\'') //输出'光头强来了'
})
},
template : `<div>
<h2>我是熊二</h2>
</div>`
})
//实例
new Vue({
el : "#app",
})
</script>
</body>3.Vue.js 中单页面应用的实现（vue-router）：
（1）通过 npm 或者 bower 下载安装 vue-router；
（2）导入时，要将 vue-router 导入在 vue 下面（注意书写时的顺序）；
（3）router 中有自带的 html 标签：
router-view（就是一个 div ，视图，用来显示组件）；
router-link（就是 a 链接，用于组件或者页面间跳转）；
（4）router-link 中通过 to 指令实现页面的跳转（to='要跳转的地址'）；
但是如果在要跳转的地址后面添加了参数（:参数），就是使用 v-bind:to='地址' 或者 :to='地址'；
（5）this.$route：获取组件之间传递的数据（它是一个对象，里面有很多属性）；
<body>
<div id="app">
<router-view></router-view> //视图：用来显示组件
</div>
//导入代码
<script src='vue.js'></script>
<script src='vue-router.js'></script>
//写自己的代码
<script>
//创建组件
var mytest01 = Vue.component('test01',{
methods : {
//定义一个方法，用于跳转界面（供button使用）
jump : function(){
myRouter.push('/myTest02') //这一步必须要加
}
},
template : `<div>
<h1>这是组件test01</h1>
<router-link to='/myTest02'>跳转到test02界面</router-link>
<button @click='jump'>点我跳转到test02界面</button>
</div>`
})
var mytest02 = Vue.component('test02',{
template : `<div>
<h2>这是组件test02</h2>
</div>`
})
//定义跳转的对象
var myRoutes = [
{
path : '/myTest01',
component : mytest01,
},
{
path : '/myTest02',
component : mytest02,
},
{
path : '/',
component : mytest01,
},
];
//创建router实例
var myRouter = new VueRouter({
routes : myRoutes //这一步必须要加，用于定义跳转的对象
});
//实例
new Vue({
el : '#app',
router : myRouter, //这一步必须要加（属性值要与router实例相对应）
})
</script>
</body>4.Vue.js 单页面应用的练习：
<body>
<div id="app">
<router-view></router-view> //视图：用来显示组件
</div>
//导入代码
<script src='vue.js'></script>
<script src='vue-router.js'></script>
//写自己的代码
<script>
//创建组件
var regComponent = Vue.component('reg',{
data : function(){
return {
str : ''
}
},
template : `<div>
<h1>这是注册界面</h1>
请输入：<input type="text" v-model='str'/>
//将数据以参数的形式显示在地址栏中
<router-link v-bind:to="'/login/' + this.str ">点击跳转到登录界面</router-link>
</div>`
})
var loginComponent = Vue.component('login',{
data : function(){
return {
str : ''
}
},
//这是一个专门用来接收传来的数据的方法（兄弟组件）
created : function(){
console.log(this.$route.params) //获取地址栏中的参数
thus.str = this.$route.params.uname
},
template : `<div>
<h2>这是登录界面</h2>
<h4>接收的数据为：{{str}}</h4>
</div>`
})
//定义跳转的对象
var myRoutes = [
{
path : '/reg',
component : regComponent,
},
{
path : '/login/:uname',
component : loginComponent,
},
{
path : '/',
component : regComponent,
}
];
//创建router实例
var myRouter = new VueRouter({
routes : myRoutes //这一步必须要加，用于定义跳转的对象
});
//实例
new Vue({
el : '#app',
router : myRouter, //这一步必须要加（属性值要与router实例相对应）
})
</script>
</body>5.Vue.js 中的嵌套路由：
（1）children：children 中继续添加需要跳转的地址和组件；
<body>
<div id="app">
<router-view></router-view> //视图：用来显示组件
</div>
//导入代码
<script src='vue.js'></script>
<script src='vue-router.js'></script>
//写自己的代码
<script>
//创建组件
var mainComponent = Vue.component('main',{
template : `<div>
<h1>这是主页</h1>
<router-link to='/pag'>点击跳转</router-link>
</div>`
})
var pagCompnent = Vue.component('pag',{
template : `<div>
<h1>这是第二个页面</h1>
<router-link to='/get'>收件箱</router-link>
<router-link to='/out'>发件箱</router-link>
<router-link to='/main'>返回主页</router-link>
<router-view></router-view> //通过这个标签将嵌套的页面显示
</div>`
})
var getEmail = Vue.component('get',{
template : `<div>
<ul>
<li>收件箱1</li>
<li>收件箱2</li>
<li>收件箱3</li>
</ul>
</div>`
})
var outEmail = Vue.component('out',{
template : `<div>
<ul>
<li>已发件箱1</li>
<li>已发件箱2</li>
<li>已发件箱3</li>
</ul>
</div>`
})
//定义跳转的对象
var myRoutes = [
{
path : '/main',
component : mainComponent
},
{
path : '/pag',
component : pagCompnent,
children : [
{
path : '/get',
component : getEmail,
},
{
path : '/out',
component : outEmail
}
]
},
{
path : '/',
component : mainComponent
}
];
//创建router实例
var myRouter = new VueRouter({
routes : myRoutes //这一步必须要加，用于定义跳转的对象
});
//实例
new Vue({
el : '#app',
router : myRouter, //这一步必须要加（属性值要与router实例相对应）
})
</script>
</body>
771
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
