1 父给子传值
父组件首先要引用子组件,可以传属性值或者方法或者实例
父组件:
- 导入子组件
- 在components中注册
- 在template 中引用子组件, 并绑定自己的data属性
子组件:使用props接收父的值,就像自己的data属性中的值那样调用, 注意子组件的data和props重名, 也会优先使用父的值
父组件:
<template>
<div>
<about v-bind:data="msg" v-bind:run="run"></about>
<!--给子组件绑定自己的data-->
<!--第一个data是子组件props里面要传的值,第二个msg是data的值-->
</div>
</template>
<script>
import about from './About'
export default {
name: "Test",
data(){
return{
msg: "fuck it"
}
},
components: {
about
},
methods:{
run(){
alert("这是父组件的方法")
}
}
}
</script>
子组件:
<template>
<div class="about container">
<h1 class="page=header">随便</h1>
{{ data }}
<button v-on:click="run()">我是子组件的按钮</button>
</div>
</template>
<script>
export default {
name: 'about',
data() {
return{
data: '6666'
}
},
props: {
data: {
type:String
},
run:{
type:Function
}
}
}
</script>
2 父传给子 子组件主动获取父组件的方法和属性
- 父组件都是常规操作, 导入并引入子组件
- 子组件通过this.$parent 调用父组件的方法和属性
父组件:
<template>
<div>
<about ></about>
</div>
</template>
<script>
import about from './About'
export default {
name: "Test",
data(){
return{
msg: "我是父组件的属性"
}
},
components: {
about
},
methods:{
run(){
alert("我是父组件的方法")
}
}
}
</script>
子组件:
<template>
<div class="about container">
<h1 class="page=header">随便</h1>
<button @click="getParentData"> 我是子组件的方法</button>
</div>
</template>
<script>
export default {
name: 'about',
data() {
return{
}
},
methods:{
getParentData(){
alert(this.$parent.msg);
this.$parent.run();
}
}
}
</script>
3 子给父传, 父主动获取子的方法和属性
- 父首先还有导入子组件, 然后再template中调用
- 然后最关键的要加个ref属性,
- 然后通过ref的属性值获取子组件的属性和方法
- 获取时是 this.$refs
父组件:
<template>
<div>
<about ref="child"></about>
<button @click="getChildData">我是父组件的按钮</button>
</div>
</template>
<script>
import about from './About'
export default {
name: "Test",
data(){
return{
}
},
components: {
about
},
methods:{
getChildData(){
// alert(this.$refs.child.msg)
this.$refs.child.run()
}
}
}
</script>
子组件:
<template>
<div class="about container">
<h1 class="page=header">随便</h1>
{{ data }}
<button v-on:click="run">我是子组件的按钮</button>
</div>
</template>
<script>
export default {
name: 'about',
data() {
return{
msg: '6666'
}
},
methods:{
run(){
alert("我是子组件的方法")
}
}
}
</script>
4 子传给父
-
父组件正常导入和调用
- 父组件调用时绑定个属性,属性的值是自己的一个方法
- 子组件通过$emit调用父组件绑定的属性,并传个值
父组件:
<template>
<div>
<about v-on:titleChange="updateChange" ></about>
<!--titleChange是子组件this.$emit要调用的 updateChange是下面的方法 -->
{{ title }}
</div>
</template>
<script>
import about from './About'
export default {
name: "Test",
data(){
return{
title:""
}
},
components: {
about
},
methods:{
updateChange(data){
this.title=data
}
}
}
</script>
子组件 :
<template>
<div class="about container">
<h1 class="page=header">随便</h1>
<button @click="getParentData"> 我是子组件的方法</button>
</div>
</template>
<script>
export default {
name: 'about',
data() {
return{
msg:"我是来自子组件的值"
}
},
methods:{
getParentData(){
this.$emit("titleChange", this.msg)
}
}
}
</script>
5 兄弟组件相互传值
- 父组件正常引入两个组件并调用
- 新建个js 文件, 建一个空的vue实例, 叫VueEvent , 叫啥随意
- 两个子组件都引入这个VueEvent 实例v
- 要传值的子组件vueEvent.$emit("to-news", this.msg), 通过这个空实例vueEvent.的$emit广播,广播的名字叫"to-news"
- 接收值的子组件VueEvent.$on("to-news", function (data) , 过不这里的this不再是这个子组件的实例了
父组件:
<script>
import Test1 from "./Test1";
import Test from "./About"
export default {
name: "test1",
components:{
Test1,
Test
}
}
</script>
VueEvent.js:
import Vue from 'vue'
let VueEvent = new Vue();
export default VueEvent
要传值的子组件:
<template>
<div>
<p>我是子组件test1</p>
<button @click="emitNews">点我子组件广播数据</button>
</div>
</template>
<script>
import VueEvent from "../VueEvent";
export default {
name: "test1",
data() {
return {
msg:"我是另一个子组件传来的的值"
}
},
methods: {
emitNews(){
VueEvent.$emit("to-news", this.msg)
// $emit广播, 这个广播的名字叫to-news
}
}
}
</script>
接收值的子组件:
<template>
<div>
<p>我是子组件test2 {{ news }}</p>
</div>
</template>
<script>
import VueEvent from "../VueEvent";
export default {
name: "test1",
data(){
return{
news:""
}
},
mounted() {
let that=this;
// 要先把this存起来, 要不在下面写的话, 这个this就不是当前这个实例了
VueEvent.$on("to-news", function (data) {
that.news=data
})
}
}
</script>