vuejs prop基本用法

vuejs prop基本用法

下面看一个示例，使用prop属性向子组件传递数据，这里传递“三杯两盏淡酒，怎敌他、晚来风急！”，在子组件的props选项中接收prop属性，然后使用差值语法在模板中渲染prop属性。

使用prop属性向子组件传递数据

<div id="app">
        <blog-content date-title="三杯两盏淡酒，怎敌他、晚来风急！"></blog-content>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm= Vue.createApp({});
        vm.component('blog-content', {
            props: ['dateTitle'],
            //date-title就像data定义的数据属性一样
            template: '<h3>{{ dateTitle }}</h3>',
            //在该组件中可以使用“this.dateTitle”这种形式调用prop属性
            created(){
                console.log(this.dateTitle);
            }
        });
        vm.mount('#app');
    </script>

在谷歌浏览器中运行程序，效果如图

所示。

图　使用prop属性向子组件传递数据

上面示例中，使用prop属性向子组件传递了字符串值，还可以传递数字。这只是它简单的一个使用。通常情况下可以使用v-bind来传递动态的值，传递数组和对象时也需要使用v-bind指令。
修改上面示例，在Vue实例中定义title属性，传递到子组件中去。
【例4】传递title属性到子组件

 <div id="app">
       <blog-content v-bind:date-title="content"></blog-content>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm= Vue.createApp({
           //该函数返回数据对象
           data(){
             return{
               content:"繁紫韵松竹，远黄绕篱落。"
               }
            }
        });
        vm.component('blog-content', {
            props: ['dateTitle'],
            template: '<h3>{{ dateTitle }}</h3>',
        });
        vm.mount('#app');
    </script>

在谷歌浏览器中运行程序，效果如图

传递title属性

在上面示例中，Vue实例向子组件中传递数据，通常情况下多用于组件向组件传递数据。下面创建两个组件，在页面中渲染其中一个组件，而在这个组件中使用另外一个组件，并传递title属性。
【例】组件之间传递数据

    <div id="app">
        <!--使用blog-content组件-->
        <blog-content></blog-content>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm= Vue.createApp({ });
        vm.component('blog-content', {
            // 使用blog-title组件，并传递content
     template: '<div><blog-title v-bind:date-title="title"></blog-title></
div>',
            data:function(){
                return{
                    title:"湖光秋月两相和，潭面无风镜未磨。"
                }
            }
        });
        vm.component('blog-title', {
            props: ['dateTitle'],
            template: '<h3>{{ dateTitle }}</h3>',
        });
        vm.mount('#app');
    </script>

在谷歌浏览器中运行程序，效果如图所示。
图

组件之间传递数据

如果组件需要传递多个值，可以定义多个prop属性。

【例】传递多个值

    <div id="app">
        <!--使用blog-content组件-->
        <blog-content></blog-content>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm= Vue.createApp({ });
        vm.component('blog-content', {
            // 使用blog-title组件，并传递content
            template: '<div><blog-title :name="name" :price="price" :city="city">
</blog-title></div>',
            data:function(){
                return{
                    name:"洗衣机",
                    price:"6880元",
                    city:"上海"
                }
            }
        });
        vm.component('blog-title', {
            props: ['name','price','city'],
            template: '<ul><li>{{name}}</li><li>{{price}}</li><li>{{city}
/li></
ul> ',
        });
         vm.mount('#app');
    </script>

在谷歌浏览器中运行程序，效果如图所示。

图　传递多个值
从上面示例可以发现，以字符串数组形式列出多个prop属性：

props: ['name','price','city'],

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

props: {
    name: String,
    price: String,
    city: String,
}

单向数据流
所有的prop属性，传递数据都是单向的。父组件的prop属性的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的数据，从而导致应用的数据流向难以理解。
此外，每次父级组件发生变更时，子组件中所有的prop属性都将会刷新为最新的值。这意味着不应该在一个子组件内部改变prop属性。如果这样做，Vue会在浏览器的控制台中发出警告。
有两种情况可能需要改变组件的prop属性。一种情况是定义一个prop属性，以方便父组件传递初始值，在子组件内将这个prop作为一个本地的prop数据来使用。遇到这种情况，解决办法是在本地的data选项中定义一个属性，然后将prop属性值作为其初始值，后续操作只访问这个data属性。代码如下：

props: ['initDate'],
data: function () {
  return {
    title: this.initDate
  }
}

另一种情况是prop属性接收数据后需要转换后使用。这种情况可以使用计算属性来解决。代码如下：

  props: ['size'],
    computed: {
      nowSize:function(){
        return this.size.trim().toLowerCase()
      }

}