2021年应届生秋招即将拉开帷幕，我也在这里开始分享我的日常复习了。欢迎同学们添加我的微信：hlf2020f
一、父组件向子组件传值
子组件是无法直接获得父组件的值的，需要通过propos来获得，你肯定有很多疑问，难道直接写就行吗，首先我们需要让子组件知道父组件的值！
1.props(父向子传值)
parent.vue
<template>
<div>
<h4>这里是父组件</h4>
<p v-for="item in products">{{item.productName}}:{{item.productPrice}}</p>
<Child :products="products">111</Child>
<!-- 子组件是没有办法直接获得父组件的值的，他需要子组件声明一个动态的值来接收这个父组件的值-->
<!-- <router-link to="/child">child</router-link>-->
<!-- <router-view></router-view>-->
</div>
</template>
<script>
import Child from "./Child";
export default {
name: "Parent.vue",
data(){
return{
products:[
{
productName:'衣服',
productCount:20,
productPrice: 100
},
{
productName:'裤子',
productCount:30,
productPrice:120
},
{
productName:'鞋',
productCount:'40',
productPrice:150
},
{
productName:'帽子',
productCount:'5',
productPrice:200
}
]
}
},
components:{
Child
},
}
</script>
<style scoped>
</style>复制代码<template>
<div>
<h5>这里是子组件</h5>
<button @click="Btn">传值按钮</button>
<!--父组件想要获得子组件的值需要通过一个事件来获得-->
<ul>
<li v-for="item in products ">{{item.productName}}:{{item.productPrice}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "Child",
data(){
return{
msg:this.products, //通过这种方式子组件就可以用父组件中的数据了
message:{
productName:'发饰',
productCount:15,
productPrice:10
}
}
},
props:{
products:Array
},
// watch:{
// products:function (val) {
// this.msg = val
// }
// }
}
</script>
<style scoped>
</style>复制代码关于child.vue中的watch方法，很多网友在自己的博客中说子组件在data中即使使用了props中的数据，当props更新时，子组件是没办法获取的，需要watch,但是我试了以下是可以的，希望知道我疑问的网友可以给予解答。
2.父组件向子组件传值（$parent）
这种方式并不需要声明一个让子组件知道的值，直接利用$parent这个API就可以。
$root 和 $parent 都能够实现访问父组件的属性和方法，两者的区别在于，如果存在多级子组件，通过parent 访问得到的是它最近一级的父组件，通过root 访问得到的是根父组件(App.vue) 所以存在组件嵌套的情况下 不要使用 $root
parent.vue
<template>
<div>
<h4>这里是父组件</h4>
<p v-for="item in products">{{item.productName}}:{{item.productPrice}}</p>
<Child>111</Child>
<!-- 子组件是没有办法直接获得父组件的值的，他需要子组件声明一个动态的值来接收这个父组件的值-->
<!-- <router-link to="/child">child</router-link>-->
<!-- <router-view></router-view>-->
</div>
</template>
<script>
import Child from "./Child";
export default {
name: "Parent.vue",
data(){
return{
products:[
{
productName:'衣服',
productCount:20,
productPrice: 100
},
{
productName:'裤子',
productCount:30,
productPrice:120
},
{
productName:'鞋',
productCount:'40',
productPrice:150
},
{
productName:'帽子',
productCount:'5',
productPrice:200
}
]
}
},
components:{
Child
},
}
</script>
<style scoped>
</style>复制代码<template>
<div>
<h5>这里是子组件</h5>
<!-- <button @click="Btn">传值按钮</button>-->
<!--父组件想要获得子组件的值需要通过一个事件来获得-->
<button @click="Btn">接收父组件传过来的值</button>
<ul>
<li v-for="item in msg ">{{item.productName}}:{{item.productPrice}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "Child",
data(){
return{
msg:[],
message:{
productName:'发饰',
productCount:15,
productPrice:10
}
}
},
methods:{
Btn(){
this.msg = this.$parent.products ;
}
},
// watch:{
// products:function (val) {
// this.msg = val
// }
// }
}
</script>
<style scoped>
</style>复制代码二、子向父（父组件获取子组件的值和方法）
1.$emit
parent.vue
<template>
<div>
<h4>这里是父组件</h4>
<Child @parent = 'Fbtn'></Child>
<p @click="Fbtn">查看父组件传值后的数据</p>
<p v-if="flag" v-for="item in products">{{item.productName}}:{{item.productPrice}}</p>
<!-- 子组件是没有办法直接获得父组件的值的，他需要子组件声明一个动态的值来接收这个父组件的值-->
<!-- <router-link to="/child">child</router-link>-->
<!-- <router-view></router-view>-->
</div>
</template>
<script>
import Child from "./Child";
export default {
name: "Parent.vue",
data(){
return{
flag:false,
products:[
{
productName:'衣服',
productCount:20,
productPrice: 100
},
{
productName:'裤子',
productCount:30,
productPrice:120
},
{
productName:'鞋',
productCount:'40',
productPrice:150
},
{
productName:'帽子',
productCount:'5',
productPrice:200
}
]
}
},
methods:{
Fbtn(data){
this.products.push(data);
this.flag = true
}
},
components:{
Child
},
}
</script>
<style scoped>
</style>复制代码<template>
<div>
<h5>这里是子组件</h5>
<button @click="Btn">向父组件传值按钮</button>
<!--父组件想要获得子组件的值需要通过一个事件来获得-->
<!-- <ul>-->
<!-- <li v-for="item in msg ">{{item.productName}}:{{item.productPrice}}</li>-->
<!-- </ul>-->
</div>
</template>
<script>
export default {
name: "Child",
data(){
return{
msg:[],
message:{
productName:'发饰',
productCount:15,
productPrice:10
}
}
},
methods:{
Btn(){
this.$emit('parent',this.message)
}
},
// watch:{
// products:function (val) {
// this.msg = val
// }
// }
}
</script>
<style scoped>
</style>
复制代码2.$ref
parent.vue
<template>
<div>
<h4>这里是父组件</h4>
<Child ref="child"></Child>
<p @click="Fbtn">查看父组件传值后的数据</p>
<p v-if="flag" v-for="item in products">{{item.productName}}:{{item.productPrice}}</p>
<!-- 子组件是没有办法直接获得父组件的值的，他需要子组件声明一个动态的值来接收这个父组件的值-->
<!-- <router-link to="/child">child</router-link>-->
<!-- <router-view></router-view>-->
</div>
</template>
<script>
import Child from "./Child";
export default {
name: "Parent.vue",
data(){
return{
flag:false,
products:[
{
productName:'衣服',
productCount:20,
productPrice: 100
},
{
productName:'裤子',
productCount:30,
productPrice:120
},
{
productName:'鞋',
productCount:'40',
productPrice:150
},
{
productName:'帽子',
productCount:'5',
productPrice:200
}
]
}
},
methods:{
Fbtn(){
this.products.push(this.$refs.child.message)
this.flag = true
}
},
components:{
Child
},
}
</script>
<style scoped>
</style>复制代码<template>
<div>
<h5>这里是子组件</h5>
<!-- <button @click="Btn">传值按钮</button>-->
<!--父组件想要获得子组件的值需要通过一个事件来获得-->
<!-- <ul>-->
<!-- <li v-for="item in msg ">{{item.productName}}:{{item.productPrice}}</li>-->
<!-- </ul>-->
</div>
</template>
<script>
export default {
name: "Child",
data(){
return{
msg:[],
message:{
productName:'发饰',
productCount:15,
productPrice:10
}
}
},
methods:{
Btn(){
this.msg = this.$parent.products ;
}
},
// watch:{
// products:function (val) {
// this.msg = val
// }
// }
}
</script>
<style scoped>
</style>复制代码3.$children
$children这个api获取的子组件的一组数组，也就是这个数组里包括你使用的所有子组件
parent.vue
<template>
<div>
<h4>这里是父组件</h4>
<Child ></Child>
<p @click="Fbtn">查看父组件传值后的数据</p>
<p v-if="flag" v-for="item in products">{{item.productName}}:{{item.productPrice}}</p>
<!-- 子组件是没有办法直接获得父组件的值的，他需要子组件声明一个动态的值来接收这个父组件的值-->
<!-- <router-link to="/child">child</router-link>-->
<!-- <router-view></router-view>-->
</div>
</template>
<script>
import Child from "./Child";
export default {
name: "Parent.vue",
data(){
return{
flag:false,
products:[
{
productName:'衣服',
productCount:20,
productPrice: 100
},
{
productName:'裤子',
productCount:30,
productPrice:120
},
{
productName:'鞋',
productCount:'40',
productPrice:150
},
{
productName:'帽子',
productCount:'5',
productPrice:200
}
]
}
},
methods:{
Fbtn(){
this.products.push(this.$children[0].message)
this.flag = true
}
},
components:{
Child
},
}
</script>
<style scoped>
</style>复制代码<template>
<div>
<h5>这里是子组件</h5>
<!-- <button @click="Btn">传值按钮</button>-->
<!--父组件想要获得子组件的值需要通过一个事件来获得-->
<!-- <ul>-->
<!-- <li v-for="item in msg ">{{item.productName}}:{{item.productPrice}}</li>-->
<!-- </ul>-->
</div>
</template>
<script>
export default {
name: "Child",
data(){
return{
msg:[],
message:{
productName:'发饰',
productCount:15,
productPrice:10
}
}
},
methods:{
Btn(){
this.msg = this.$parent.products ;
}
},
// watch:{
// products:function (val) {
// this.msg = val
// }
// }
}
</script>
<style scoped>
</style>复制代码
