Vue props、插槽

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.插槽

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

父级组件传递数据

<div class=‘parent’>

<child>

<div>hello 插槽</div>

</child>

</div>

子级组件

<div class=“child”>

<slot>展示内容</slot>

</div>

 

具名插槽

父级组件传递数据

<template> 

<div class="parent">

<child slot="v1">

<template>

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

</template>

</child>

</div>

</tempate>

子组件

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

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

结果：这个父组件的数据

 

作用域插槽

父级组件传递数据

<template> 

<div class="parent">

<child>

<template  slot-scope="slotpeops">

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

</template>

</child>

</div>

</tempate>

子组件

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

 

 

 

 

new Vue({

data(){

return{

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

}

},

render: h => h(App),

}).$mount('#app')