在父组件的引用标签里 加入冒号属性
<template>
<div>
<!--这里冒号属性就是写入子组件数值-->
<v-header :title="title"></v-header>
<h1>新闻组件----{{msg}}</h1><br/>
<button v-on:click="setMsg">看看是啥新闻</button>
</div>
</template>
<script>
import header from './Header.vue';
export default{
components:{
'v-header':header
},
data(){
return{
msg:'默认新闻',
title:'新闻组件传过来的title'
}
},
methods:{
setMsg(){
this.msg = '默认改变新闻'
}
}
}
</script>
<style lang="scss" scoped="scoped">
</style>再在引用的子组件里加入一个数组来接收值
<template>
<div>
<h1>我是真头部----{{title}}</h1><br/>
<h1>我是真头部----{{msg}}</h1><br/>
<button v-on:click="setMsg">头部的抵抗</button>
</div>
</template>
<script>
export default{
data(){
return{
msg:'头部',
}
},
methods:{
setMsg(){
this.msg = '我真的是真头部'
}
},
props:['title'] //这个是接收父组件传过来的值
}
</script>
<style lang="scss" scoped="scoped">
</style>————————————————————————————————————————————————————
父组件给子组件传方法。。。。。
父组件
<template>
<div>
<!--这里冒号属性就是写入子组件数值-->
<v-header :title="title" :run="run"></v-header>
<h1>新闻组件----{{msg}}</h1><br/>
<button v-on:click="setMsg">看看是啥新闻</button>
</div>
</template>
<script>
import header from './Header.vue';
export default{
components:{
'v-header':header
},
data(){
return{
msg:'默认新闻',
title:'新闻组件传过来的title'
}
},
methods:{
setMsg(){
this.msg = '默认改变新闻'
},
run(){
alert('我是来自父组件的run方法');
}
}
}
</script>
<style lang="scss" scoped="scoped">
</style>子组件
<template>
<div>
<h1>我是真头部----{{title}}</h1><br/>
<h1>我是真头部----{{msg}}</h1><br/>
<button v-on:click="setMsg">头部的抵抗</button>
<button v-on:click="run()">新闻父组件的抵抗</button>
</div>
</template>
<script>
export default{
data(){
return{
msg:'头部',
}
},
methods:{
setMsg(){
this.msg = '我真的是真头部'
}
},
props:['title','run'] //这个是接收父组件传过来的值
}
</script>
<style lang="scss" scoped="scoped">
</style>——————————————————————————————————————————————————————
还特么可以整个组件传过去。。。。传入父组件
<template>
<div>
<!--这里冒号属性就是写入子组件数值-->
<v-header :title="title" :run="run" :newzujian="this"></v-header>
<h1>新闻组件----{{msg}}</h1><br/>
<button v-on:click="setMsg">看看是啥新闻</button>
</div>
</template>
<script>
import header from './Header.vue';
export default{
components:{
'v-header':header
},
data(){
return{
msg:'默认新闻',
title:'新闻组件传过来的title'
}
},
methods:{
setMsg(){
this.msg = '默认改变新闻'
},
run(){
alert('我是来自父组件的run方法');
}
}
}
</script>
<style lang="scss" scoped="scoped">
</style>然后子组件点取值，也可以取父组件方法
<template>
<div>
<h1>我是真头部----{{title}}</h1><br/>
<h1>我是真头部----{{msg}}</h1><br/>
<button v-on:click="setMsg">头部的抵抗</button>
<button v-on:click="run()">新闻父组件的抵抗</button>
<h2>{{newzujian.msg}}</h2>
</div>
</template>
<script>
export default{
data(){
return{
msg:'头部',
}
},
methods:{
setMsg(){
this.msg = '我真的是真头部'
}
},
props:['title','run','newzujian'] //这个是接收父组件传过来的值
}
</script>
<style lang="scss" scoped="scoped">
</style>——————————————————————————————————————————————————————
props还可以去验证父组件传过来数据的合法性
https://cn.vuejs.org/v2/guide/components-props.html
———————————————————————————————————————————————————————
父组件主动获取子组件的数值方法
<template>
<div>
<!--1.这里给引用的子组件定义一个ref-->
<v-header ref='header'></v-header>
<h1>新闻组件----{{msg}}</h1><br/>
<button v-on:click="setMsg()">看看是啥新闻</button>
<button v-on:click="getChild()">获得引用子组件的数据和方法</button>
</div>
</template>
<script>
import header from './Header.vue';
export default{
components:{
'v-header':header
},
data(){
return{
msg:'默认新闻',
title:'新闻组件传过来的title'
}
},
methods:{
setMsg(){
this.msg = '默认改变新闻'
},
run(){
alert('我是来自父组件的run方法');
},
getChild(){
//2.然后用this.$refs.定义名称获取
var cmsg = this.$refs.header.msg;
alert(cmsg);
this.$refs.header.run();
}
}
}
</script>
<style lang="scss" scoped="scoped">
</style>————————————————————————————————————————————————————
子组件主动获取父组件的数值与方法
<template>
<div>
<h1>我是真头部----{{msg}}</h1><br/>
<button v-on:click="setMsg()">头部的抵抗</button>
</div>
</template>
<script>
export default{
data(){
return{
msg:'头部',
}
},
methods:{
setMsg(){
this.msg = '我真的是真头部';
//这里是定义主动获取父组件的数值与方法
alert(this.$parent.msg);
//方法就直接调用方法即可
},
run(){
alert('我是子组件的run方法');
}
},
}
</script>
<style lang="scss" scoped="scoped">
</style>————————————————————————————————————————————————————
非父子组件传值
首先先建立个js
然后里面的内容，只需要建立一个vue实例并暴露出来即可
import Vue from 'vue';
var VueEvent = new Vue()
export default VueEvent;然后再在News组件中定义一个方法
<template>
<div>
<!--1.这里给引用的子组件定义一个ref-->
<h1>新闻组件----{{msg}}</h1><br/>
<button v-on:click="setMsg()">看看是啥新闻</button>
<button v-on:click="passMsg()">给兄弟组件Header传递</button>
</div>
</template>
<script>
//引入VueEvent
import VueEvent from '../model/VueEvent.js';
export default{
components:{
},
data(){
return{
msg:'默认新闻',
title:'新闻组件传过来的title'
}
},
methods:{
setMsg(){
this.msg = '默认改变新闻'
},
passMsg(){
//传递的数据的固定格式
VueEvent.$emit('to-header',this.msg);
}
}
}
</script>
<style lang="scss" scoped="scoped">
</style>然后让header 初始化就加载方法监听方法，个人理解就是个消息队列
<template>
<div>
<h1>我是真头部----{{msg}}</h1><br/>
<button v-on:click="setMsg()">头部的抵抗</button>
<button v-on:click="getNewsPass()">获取News的传值</button>
</div>
</template>
<script>
import VueEvent from '../model/VueEvent.js';
export default{
data(){
return{
msg:'头部',
}
},
methods:{
setMsg(){
this.msg = '我真的是真头部';
},
},
mounted(){
VueEvent.$on('to-header',function(data){
alert(data);
})
}
}
</script>
<style lang="scss" scoped="scoped">
</style>