组件（2）：使用Prop传递数据
时间：2023-04-02 23:47:39
HTML
传递数据的组件实例作用域相互独立，父子组件之间不能共享数据。如果想在子组件的模板中使用父组件的数据，可以通过Prop将父组件的数据发送给子组件，子组件用props选项声明它期望的数据。父组件要传递数据，首先要将数据绑定到子组件自定义标签的特性上，绑定值解析分两种情况：Literalprop="value"表达式（动态绑定）v-bind:prop特殊caseof="expression"expressionv-bind="Object"newVue({el:'#app-1',data:{parentMsg:'root'sdynamicdata',parentObj:{text:'hellovue!',isShow:true},},components:{'component-1':{props:['expectMsg','expectDynamicMsg','expectObj','text','isShow'],template:'\
\
{{expectMsg}}
\
{{expectDynamicMsg}}
\
{{expectObj.text}}\{{text}}\'}
下面是几个绑定的例子：将字符串"staticdata"绑定到子组件props的expectMsg上，并设置父组件属性parentMsg为动态绑定到子组件的expectDynamicMsg特性。父组件中的一个对象parentObj动态绑定到子组件的expectObj特性。父组件中parentObj对象的属性text和isShow绑定到子组件的text和isShow。功能注意事项：要将数字发送到子组件，您不能使用文字绑定。字面量都是字符串，所以需要动态绑定
prop来验证何时发送数据或者没有数据时设置一个默认值，子组件选项props需要用一个对象来代替数组。简单情况：props:{someProp:String}传递的数据必须是字符串。对于复杂的点，可以设置默认值和验证器，如：newVue({el:'#app-2',data:{message:{title:'propverification',text:'父组件数据'}},components:{'component-2':{props:{propObj:{type:Object,//传递对象的title属性必须是字符串验证器:function(value){returntypeofvalue.title==="string"},//发送的数据是数组或对象，设置的默认值必须通过函数返回default:function(){return{title:'propvalidation',text:'默认值数组/对象应由工厂函数返回'}}}}，模板：'{{propObj.title}}
{{propObj.text}}
type属性可以也可以是函数，使用instanceof验证。验证发生在创建子组件实例之前，因此验证中的任何函数都不能使用子组件实例属性。更多类型的验证Prop验证Prop的单向绑定和双向绑定发送数据实际上是一个数据绑定的过程，将组件之间的特定数据绑定在一起。默认情况下，它是单向绑定。子组件的数据对父组件是透明的，父组件数据的变化会引起子组件数据的变化。newVue({el:'#app-3',data:{content:"pleaseinput..."},components:{'component-3':{props:['txt'],template:'
'}}})
父组件通过Prop发送数据，将父组件属性content和子组件属性txt绑定在一起，在第一个文本框中输入值即可改变内容Content，子组件的txt会跟着改变显示在第二个文本框里。如果在子模板的第二个文本框中输入，修改txt的值，则父组件控制的第一个文本框的内容不会改变。并在控制台给出警告，说不要修改props选项中的值。相反，您可以将prop的值分配给数据或计算属性。所以你可以像下面这样用数据替换prop作为局部变量。'component-3':{props:['txt'],template:'
',data:function(){返回{txtData:this.txt如果你只考虑输出而不考虑输入，你也可以使用计算属性而不是'component-3':{props:['txt'],template:'
',computed:{txtComputed:function(){returnthis.txt}}}非prop特征组件的作者并不总是预见组件将被使用的场景。因此，组件可以接收任何传入的属性，这些属性将被添加到组件的根元素中，而无需定义相应的props。varvm=newVue({el:'#app-4',components:{"component-4":{template:"
hellovue!"}}}); 渲染结果