<template>
<div>Home
<button @click="getHomeData()">Home请求数据</button>
<ul>
<li v-for="(item,key) in list" :key=key>
{{item.title}}
</li>
</ul>
<!-- 给子组件传值绑定title属性 -->
<v-header :title='title' :run="run" :home="this" ref='header'></v-header>
<button @click="getSonData()">主动获取子组件的属性和方法</button>
<br>
<hr>
<!-- 非父子组件通讯 -->
<button @click="emitNews()">非父子组件传值----给news组件传值</button>
<hr>
<v-life v-if="flag"></v-life>
<button @click="flag=!flag">挂载和卸载组件</button>
<hr>
<h2>get传值</h2>
<ul>
<li v-for="(item,index) in list2" :key=index>
<router-link :to="'/pcontent?aid='+index">{{index}}----{{item}}</router-link>
</li>
</ul>
<hr>
<button @click="goNews()">通过js跳转路由</button>
</div>
</template>
<script>
import VueEvent from '../model/VueEvent.js'
import Header from './Header.vue'
import Life from './Life.vue'
import Axios from 'axios'
export default {
data () {
return {
msg: 'home',
flag: true,
list: [],
title: '父组件要传给子组件的值',
list2: ['111', '222', '333']
}
},
components: {
'v-header': Header,
'v-life': Life
},
methods: {
getHomeData () {
// 请求数据
var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
Axios.get(api).then((response) => {
this.list = response.data.result
}).catch((error) => {
console.log(error)
})
},
run (data) {
// 子组件通过执行run方法传递过来的值
console.log(data)
alert('我是父组件的run方法')
},
getSonData () {
alert(this.$refs.header.msg)
this.$refs.header.sonRun()
},
emitNews () {
// 广播组件
VueEvent.$emit('to-news', this.msg)
},
goNews () {
// 方法一
// this.$router.push({ path: 'news' })
// 另一种命名式路由
this.$router.push({ name: 'News' })
}
},
mounted () {
VueEvent.$on('to-home', (data) => {
console.log(data)
})
}
}
</script>
<style lang="css" scope>
</style>
一种式编程式,push路径,一种是命名式,push名字