当前位置：首页 > 资讯 > 技术文档

Vuejs第九篇之组件作用域及props数据传递实例详解

时间：2022-12-04 18:57 编辑：来源：阅读：
扫一扫，手机访问

摘要：Vuejs第九篇之组件作用域及props数据传递实例详解

本篇资料来于官方文档： [url=http://cn.vuejs.org/guide/components.html#Props]http://cn.vuejs.org/guide/components.html#Props[/url] 本教程是小编结合官方文档整理的一套更加细致，代码更多更全的教程，特别适合新手阅读。 [b]props数据传递[/b] [b]①组件实例的作用域：[/b] 是孤立的，简单的来说，组件和组件之间，即使有同名属性，值也不共享。

<div id="app"> 
<add></add> 
<del></del> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
components: { 
"add": { 
template: "<button>btn：{{btn}}</button>", 
data: function () { 
return {btn: "123"}; 
} 
}, 
del: { 
template: "<button>btn：{{btn}}</button>", 
data: function () { 
return {btn: "456"}; 
} 
} 
} 
}); 
</script>

渲染结果是： 2个按钮，第一个的值是123，第二个的值是456（虽然他们都是btn） [b]②使用props绑定静态数据：[/b] 【1】这种方法用于传递字符串，且值是写在父组件自定义元素上的。【2】下面示例中的写法，不能传递父组件data属性中的值【3】会覆盖模板的data属性中，同名的值。示例代码：

<div id="app"> 
<add btn="h"></add> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
h: "hello" 
}, 
components: { 
"add": { 
props: ['btn'], 
template: "<button>btn：{{btn}}</button>", 
data: function () { 
return {btn: "123"}; 
} 
} 
} 
}); 
</script>

这种写法下，btn的值是h，而不是123，或者是hello。【4】驼峰写法假如插值是驼峰式的，而在html标签中，由于html的特性是不区分大小写（比如LI和li是一样的），因此，html标签中要传递的值要写成短横线式的（如btn-test），以区分大小写。而在props的数组中，应该和插值保持一致，写成驼峰式的（如btnTest）。例如：

props: ['btnTest'], 
template: "<button>btn：{{btnTest}}</button>",

正确的写法：

<add btn-test="h"></add>

假如插值写短横线式，或者是html标签写成驼峰式，都不能正常生效。（除非插值不写成驼峰式——跳过大小写的限制，才可以） ③利用props绑定动态数据：简单来说，就是让子组件的某个插值，和父组件的数据保持一致。标准写法是（利用v-bind）：

<add v-bind:子组件的值="父组件的属性"></add>

如代码

<div id="app"> 
<add v-bind:btn="h"></add> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
h: "hello" 
}, 
components: { 
"add": { 
props: ['btn'], 
template: "<button>btn：{{btn}}</button>", 
data: function () { 
return {'btn': "123"}; //子组件同名的值被覆盖了 
} 
} 
} 
}); 
</script>

说明：【1】btn使用的父组件data中 h的值；【2】子组件的data的函数中返回值被覆盖了。【3】也就是说，使用v-bind的是使用父组件的值（根据属性名），没有使用v-bind的是将标签里的数值当做字符串来使用。【4】依然需要使用props，否则他会取用自己data里的btn的值 [b]④字面量和动态语法：[/b] 【1】简单来说，不加v-bind的，传递的是字面量，即当做字符串（例如1也是字符串，而不是number类型）；【2】加上v-bind的，传递的是JS表达式（因此才能传递父组件的值）；【3】加上v-bind后，如果能找到父组件的值，那么使用父组件的值；如果没有对应的，则将其看做一个js表达式（例如1+2看做3，{a:1}看做是一个对象）；如代码：

<div id="app"> 
<add v-bind:btn="1+2"></add> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
h: "hello" 
}, 
components: { 
"add": { 
props: ['btn'], 
template: "<button>btn：{{btn}}</button>" 
} 
} 
}); 
</script>

这里的btn的值是3（而不是没有加v-bind时，作为字符串的1+2） [b]⑤props的绑定类型：[/b] 【1】简单来说，分为两种类型，即单向绑定（父组件能影响子组件，但相反不行）和双向绑定（子组件也能影响父组件）；【2】单向绑定示例：（默认，或使用.once）

<div id="app"> 
父组件： 
<input v-model="val"><br/> 
子组件： 
<test v-bind:test-Val="val"></test> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
val: 1 
}, 
components: { 
"test": { 
props: ['testVal'], 
template: "<input v-model='testVal'/>" 
} 
} 
}); 
</script>

说明：当父组件的值被更改后，子组件的值也随之更改；当子组件的值被更改后，父组件的值不会变化，而假如再次修改父组件的值，子组件会再次同步。另外需要注意的是，子组件如果要同步绑定，那么子组件的input需要是v-model，而不能是value属性（那样只能单项绑定，且修改子组件的值后会失去绑定）【3】双向绑定：需要使用“.sync”作为修饰词如示例：

<div id="app"> 
父组件： 
<input v-model="val"><br/> 
子组件： 
<test :test.sync="val"></test> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
val: 1 
}, 
components: { 
"test": { 
props: ['test'], 
template: "<input v-model='test'/>" 
} 
} 
}); 
</script>

效果是无论你改哪一个的值，另外一个都会随之变动。【4】props验证：简单来说，当组件获取数据时，进行验证，只有符合条件的时候，才会使用之。写法是将props变为一个对象，被验证是值是对象的key，验证条件是和key对应的value。例如：

props: { 
test: { 
twoWay: true 
} 
},

验证test这个变量是不是双向绑定，如果不是，则报错。（注意，这个不能用于验证单向绑定）。示例代码如下：

<div id="app"> 
父组件： 
<input v-model="val"><br/> 
子组件： 
<test :test="val"></test> 
</div> 
<script> 
var vm = new Vue({ 
el: '#app', 
data: { 
val: 1 
}, 
components:{ 
test:{ 
props: { 
test: { 
twoWay: true 
} 
}, 
template: "<input v-model='test'/>" 
} 
} 
}); 
</script>

更多验证类型请查看官方教程： [url=http://cn.vuejs.org/guide/components.html#Prop__u9A8C_u8BC1]http://cn.vuejs.org/guide/components.html#Prop__u9A8C_u8BC1[/url] 以上所述是小编给大家介绍的Vuejs第九篇之组件作用域及props数据传递实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：vue页面使用阿里oss上传功能的实例(二)
下一篇：Vue.js常用指令汇总（v-if、v-for等）

资讯排行榜
更多>>