父组件
<template>
<div id="app">
<div id="user_menu">
<nvHead/>
</div>
<div id="company_banner">
<child message="hello" v-bind:changeAny="changeAnyTIme"></child> <!--父组件向子组件传值-->
<Button v-on:click="changValue()">更换父组件传给子组件的值</Button>
</div>
</div>
</template>
<script>
import nvHead from './components/loginbar.vue';
import child from './views/child.vue'
export default {
name: 'app',
data () {
return {
changeAnyTIme:'我是随时变化哦'
}
},
methods:{
changValue:function(){
this.changeAnyTIme='我是改变后的数据'
}
},
components: {
nvHead,
child
}
}
</script>
<style scoped>
/*@import url("//unpkg.com/element-ui@2.0.4/lib/theme-chalk/index.css");*/
/*@import '../public/css/global/layout.css';*/
body {
margin: 0px;
padding: 0px;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
margin: 0px auto
}
.header {
height: 30px;
margin: 0 auto;
width: 1150px;
position: relative;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
子组件
<template>
<div>
<p style="color:red;font-size: 30px">我是父组件传来的静态数据哦:{{message}}</p>
<p style="color:red;font-size: 30px">我是父组件传来的动态数据哦:{{changeAny}}</p>
</div>
</template>
<script>
export default {
props:['message','changeAny'], //获取父组件传的参数
data(){
return{
}
}
}
</script>
<style>
</style>