Vue 笔记 12.04 父子组件、第三方组件库
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 笔记 12.04 父子组件、第三方组件库相关的知识,希望对你有一定的参考价值。
参考技术A 在子组件中,可以通过$parent返回父组件的对象:如果想要返回根组件的对象,可以直接使用$root,避免了使用多个$parent的情况:
只有在父组件的mounted()页面挂载完成生命周期函数内才能获取到$children的信息,$children返回的是所有子组件对象的数组
于是引出了下面的办法:
Vue学习笔记 - 父子组件传值(props与$emit)
一、父组件向子组件传值
通过props
实现父组件向子组件传值。
1.首先,我们先创建好父组件和子组件,并将子组件引入父组件中。
父组件parent:
<template>
<div class="page">
父组件
<child></child>
</div>
</template>
<script>
import child from "./child.vue";
export default {
name: "pc_parent",
components: {
child,
},
};
</script>
子组件child:
<template>
<div class="page">
子组件
</div>
</template>
<script>
export default {
name: "pc_child",
};
</script>
2.对子组件进行修改
<template>
<div class="page">
子组件
<!-- ③在页面中展示从父组件中传来的值 -->
<p>{{value2}}</p>
</div>
</template>
<script>
export default {
name: "pc_child",
//①为子组件添加props属性
props: {
//②value2用于接受父组件传来值
value2: "",
},
};
</script>
3.对父组件进行修改
<template>
<div class="page">
父组件
<!-- 将value2值传递给子元素 -->
<child :value2='value1'></child>
</div>
</template>
<script>
import child from "./child.vue";
export default {
name: "pc_parent",
components: {
child,
},
data() {
return {
// ①设置value1为传递给子元素的值
value1: "我是从父组件来的值",
};
},
};
</script>
4.效果展示:
因为我们在子元素中展示了父元素传递来的值,所以在页面中可以看到父元素传来的值,说明父组件向子组件传递值成功。
二、子组件向父组件传值
通过$emit
实现子组件向父组件传值。
1.首先,我们先创建好父组件和子组件,并将子组件引入父组件中。
父组件parent:
<template>
<div class="page">
父组件
<child></child>
</div>
</template>
<script>
import child from "./child.vue";
export default {
name: "pc_parent",
components: {
child,
},
};
</script>
子组件child:
<template>
<div class="page">
子组件
</div>
</template>
<script>
export default {
name: "pc_child",
};
</script>
2.对子组件进行修改
<template>
<div class="page">
子组件
<!-- ①为该按钮添加一个点击事件,进行传值 -->
<button @click="byval">点击我向父组件传值</button>
</div>
</template>
<script>
export default {
name: "pc_child",
methods:{
byval(){
// ②通过$emit进行传值,第一个参数为方法名,第二个参数为需要传递的值
this.$emit('byval1','子组件传来的值')
}
}
};
</script>
3.对父组件进行修改
<template>
<div class="page">
父组件
<!-- ①用子元素的byval1方法绑定父元素的byval2方法 -->
<child @byval1='byval2'></child>
<!-- ③展示子元素传递来的值 -->
{{value}}
</div>
</template>
<script>
import child from "./child.vue";
export default {
name: "pc_parent",
components: {
child,
},
data() {
return {
value: "",
};
},
methods: {
// ②书写父元素的byval2方法,将传递来的值复制给value。
byval2(value) {
this.value = value;
},
},
};
</script>
4.效果展示
初始页面效果:
点击按钮后的效果:
当点击后,子组件中的值通过$emit
将值传递给了父元素,并复制给父元素中的value
值,所以页面中会展示子元素传递来的值。
以上是关于Vue 笔记 12.04 父子组件、第三方组件库的主要内容,如果未能解决你的问题,请参考以下文章