Vue中道具详解

时间：2021-08-24 来源：互联网编辑：宝哥软件园浏览：次

看看官方文件：

组件实例的范围是独立的。这意味着父组件的数据不能(也不应该)在子组件的模板中被直接引用。父组件数据只能通过prop分发给子组件。

也就是说，道具是子组件访问父组件数据的唯一接口。

详细的解释是：

组件可以直接在模板中的数据中呈现数据(双括号)。

子组件不能直接呈现模板中父元素的数据。

如果子组件想要引用父元素的数据，在prop中声明一个变量(比如a)，这个变量可以引用父元素的数据。然后在模板中呈现这个变量(前面是a)，此时将呈现父元素中的数据。

1.基本用法

图1-道具

div id='app1 '！- hello指的是父元素的hello，也可以指消息、问候、世界等。-child : hello=' hello '/child/div script varcom 1=vue.com(' child '，{//prop中声明的变量可以引用父元素的数据prop :[' hello ']。//在这里，渲染道具中声明的hello template 3360“divp { { hello } }/p/div”。})var app 1=new Vue({ El : ' # app 1 '，data : { greet : { hello : ' hello '，world: 'world '，}，message: 'message1 '，})/script 2。camel case vs. kebab-case:在js中用驼峰命名，在html中用短横线分隔的名称替换

！-使用烤串-case-child my-message=' hello！'在HTML/childscriptvue.component(' child '，{//使用camel case prop :[' my message ']，模板3360' span {{mymessage}}/span'}在JavaScript中)/script3。单向数据流：道具单向绑定

当父组件的属性改变时，它将被传输到子组件，但不会反过来。

每次更新父组件时，子组件的所有属性都会更新为最新值。

不要在子组件中更改道具。如果您这样做，Vue将在控制台上发出警告。

在两种情况下，我们忍不住想要修改prop中的数据：

将Prop作为初始值传入后，子组件希望将其用作本地数据；Prop作为原始数据引入，由子组件处理成其他数据输出。在这两种情况下，正确的反应是定义一个局部变量，并用prop的值初始化它：

Props: ['initialcounter']，data : function(){ return { counter : this。initialcounter}}定义计算属性，处理prop的值并返回：

Props: ['size']，computed : { normalize size : function(){ return this。size.trim()。tolower case ()}}请注意，在JavaScript中，对象和数组都是引用类型，指向相同的内存空间。如果prop是一个对象或数组，在子组件中更改它将影响父组件的状态。

例如：

div id=' app 3 ' my-component : object=' object '/my-component/div script src=' http :http://vuejs . org/js/Vue . min . js '/script script//Varmicom=Vue。组件(' my-component '，{//添加一个输入来改变子组件的childOject，那么父元素的对象也会被改变，但是vue不报错！template: 'p{{ object.name }}为{{ object.age }}岁. Brin put v-model=' childObject . name ' type=' text '/p '，prop 3360[' object '，' school']，Data: function () {//子组件的child object和父组件的对象指向同一个对象返回{childobject3360this。对象} } })；var app3=new Vue({ el: '#app3 '，data : { object : { name : '薛莹'，age: '21 '，}，school:'SCUT '，}，})/script