Vue props、插槽

最新推荐文章于 2025-05-23 09:25:59 发布

转载最新推荐文章于 2025-05-23 09:25:59 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/aoshilin/p/10720230.html

文章标签：

#javascript #ViewUI

本文详细介绍了Vue.js中组件之间的数据传递方法，包括props的使用、访问根实例、操作DOM，以及如何通过插槽进行内容分发。涵盖了静态和动态props的设置，以及如何在子组件中访问父组件传递的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.props 子组件接受父组件传递过来的数据

通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：

props: {
  title: String,//
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
 }
静态props
<div title=“组件”>父组件<div>
export default{
　　props：{
　　title: String
　　}
}

动态props
<div ：age='age'>父组件<div>
export default{
　　props：{
　　title: String
　　}
}

2.访问根实例

new Vue({

　　data(){

　　　　return{

　　　　　　foo:"aoshilin"//foo可以在任何子组件中访问(访问根实例)

　　　　}

　　render: h => h(App),

}).$mount('#app')

任意组件访问根实例：

computed:{

　　getfool(){

　　　　return this.$root.foo

　　}

任意组件写入根实例：

computed:{

　　getfool(){

　　　　return this.$root.foo=‘wangsicong’

　　}

操作原声dom

mounted（）{

this.$refs. p1.innerHTML="改变p1的内容"

}

3.插槽

插槽（内容分发），谁调用它他就给谁内容

父级组件传递数据

<child>

<div>hello 插槽</div>

</child>

</div>

子级组件

</div>

具名插槽

父级组件传递数据

<p>这个父组件的数据</p>

</template>

</child>

</div>

</tempate>

子组件

<solt name="v1">默认信息</solt>//没数据传递默认信息

<solt name="v1">{{meg}}</solt>//meg是·在父组件里面就定义的，即使在自组件定义一样的也没用

结果：这个父组件的数据

作用域插槽

父级组件传递数据

<child>

<p>{{slotprops.ct}}</p>//父组件展示效果

</template>

</child>

</div>

</tempate>

子组件

<slot ct="儿子的数据<slot>//展示的内容是子组件决定的，效果由父组件决定。

new Vue({
data(){
return{
foo:"aoshilin"//foo可以在任何子组件中访问(访问根实例)

   }
  },
  render: h => h(App),
}).$mount('#app')

转载于:https://www.cnblogs.com/aoshilin/p/10720230.html