父子组件 相互传值的事

1 父给子传值

父组件首先要引用子组件，可以传属性值或者方法或者实例

父组件：

1. 导入子组件
2. 在components中注册
3. 在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 父传给子   子组件主动获取父组件的方法和属性

1. 父组件都是常规操作， 导入并引入子组件
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 子给父传， 父主动获取子的方法和属性

1. 父首先还有导入子组件， 然后再template中调用
2. 然后最关键的要加个ref属性，
3. 然后通过ref的属性值获取子组件的属性和方法
4. 获取时是 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 子传给父

1. 父组件正常导入和调用

2. 父组件调用时绑定个属性，属性的值是自己的一个方法
3. 子组件通过$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 兄弟组件相互传值

1. 父组件正常引入两个组件并调用
2. 新建个js 文件， 建一个空的vue实例， 叫VueEvent ， 叫啥随意
3. 两个子组件都引入这个VueEvent 实例v
4. 要传值的子组件vueEvent.$emit("to-news", this.msg)， 通过这个空实例vueEvent.的$emit广播，广播的名字叫"to-news"
5. 接收值的子组件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>