python学习笔记----第八节

MySQL 数据库 day-05

  返回  

Vue 组件(二)——Prop

2021/8/21 21:37:51 浏览:

四、Prop

        在组件的使用过程中,经常会遇到需要向子组件传递数据的情况,这个时候就需要用到 prop来自定义属性传值了。

   prop概念:

        prop属性其实是一个对象,在这个对象里可以定义一些数据,而这些数据可以通过父组件传递给子组件。

        在Vue组件中,props选项的类型可以是一个字符串数组,也可以是一个对象。

Vue.component('PostItem', {
    props: ['title'],
    template: '<h3>{{title }}</h3>'
})
// 当以对象形式存值时,对象的称和值分别是 prop 各自的名称和类型,
// 类型可以是String、Number、Boolean、Array、Object、Function、Promise 等值
Vue.component('PostItem2', {
    props: {
        'title': String
    },
    template: '<h3>{{ title }}</h3>'
})

  prop 静态传值

         props选项中定义的prop可以当成该组件实例的数据属性来使用

<div id="app">
        <post title="这个是Vue组件"></post>
</div>
<script>
   Vue.component('post', {
        props: ['title'],
        template: '<h3>{{ title }}</h3>'
    })
    let vm = new Vue({
        el: "#app"
    })
</script>

   prop 动态传值

<div id="app">
        <post :title="arr"></post>
</div>
<script>
   Vue.component('post', {
        props: ['title'],
        template: '<div><h3 v-for="item in title ">{{ item }}</h3></div>'
    })
    let vm = new Vue({
        el: "#app",
        data:{
            arr:['第一个','第二个']
        }
    })
</script>

 

 

     

 

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号