子组件与父组件

最新推荐文章于 2023-12-01 20:32:51 发布

(´△｀)♪

最新推荐文章于 2023-12-01 20:32:51 发布

阅读量541

点赞数 1

分类专栏： VUE框架文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_45055486/article/details/120490149

版权

VUE框架专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中的组件定义及其特性，包括组件作为可复用的模块，独立的数据存储和方法定义。通过实例展示了如何在Vue中创建父子组件，并演示了如何从父组件向子组件传递数据，以及子组件如何通过事件向父组件传递信息。在Father.vue中，父组件通过props向Child.vue子组件传递数据'msg'，而子组件则通过props接收并展示该值。

摘要由CSDN通过智能技术生成

1.组件的定义

1.定义组件并引用
2.父组件向子组件传值
3.子组件向父组件传值

什么是组件

1.Html中有组件，是一段可以被复用的结构代码
2.Css中有组件，是一段可以被复用的样式
3.Js中有组件，是一段可以被复用的功能
4.Vue中也有组件，指的就是一个模块，是一个独立的，完整的（包含html，css，js等），可以直接拿来用的

组件特性

1.组件的实例化对象，跟vue实例化对象一样，因此，我们也可以将vue实例化对象看成组件
2.组件间是独立的，因此数据要独立存储，方法要独立定义，彼此间不能共享。

2.父组件向子组件传值

components/Child.vue 定义子组件

<template>
<div style="color: red"> 
<h1>子组件内容</h1> 
<p>{{data}}</p> 
</div> 
</template> 
<script> 
export default { // 子组件要使用父组件的数据，只需要一步，在 props中接收父组件的属性 
props: ['data'], // 接收父组件给子组件定义的属性 }
</script>

components/Father.vue 定义父组件

<template> 
<div> 
<h1>父组件内容</h1> 
父组件显示:{{msg}} <!--3.第三步：把父组件的某一个属性传递给子组件--> 
<Child :data='msg' ></Child> 
</div>
</template> 
<script>
// @指定的是src路径 
import Child from '@/views/demo/Child' // 1.第一步：在父组件中导入子组件 
export default { 
// 2.第二步：父组件中注册子组件 
components: { 
Child 
},data() { 
return {
 msg: '父组件的信息' 
} },
methods: {
 } 
}
</script>