<div id="app"> <button v-on:click="clickMe">单击我</button> <!-- 使用ViewCount组件显示单击次数 --> <view-count :prop-count="count"></view-count> </div> <template id="viewCountTemplate"> <div>{{ propCount }}</div> </template> <script type="text/javascript"> const ViewCount = { props: ['propCount'], template: '#viewCountTemplate' } const vm = new Vue({ el: '#app', components: { 'view-count': ViewCount }, data: { count: 0 }, methods: { clickMe() { this.count++; } } }); </script>传值的语法如下:
<子组件名称:prop 属性名称="表达式"></子组件名称>或者:
<子组件名称 v-bind:prop 属性名称="表达式"></子组件名称>
Vue.component('sub-component', { // 在 JavaScript 中使用的是 camelCase props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' }); // 在 HTML 中使用的是 kebab-case <sub-component :post-title="hello"></sub-component>
props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise }这不仅为组件提供了使用参考文档,还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。使用方式和说明的样例代码如下。
<!-- 即便‘42’是静态的,仍然需要v-bind来告诉Vue.js --> <!-- 这是一个JavaScript表达式而不是一个字符串. --> <sub-component v-bind:likes="42"></sub-component> <!-- 用一个变量进行动态赋值. --> <sub-component v-bind:likes="post.likes"></sub-component>
<!-- 包含该prop没有值的情况在内,都意味着true --> <sub-component is-published></sub-component> <!-- 即便'false'是静态的,仍然需要'v-bind'来告诉Vue.js --> <!-- 这是一个JavaScript表达式而不是一个字符串. --> <sub-component v-bind:is-published="false"></sub-component> <!-- 用一个变量进行动态赋值. --> <sub-component v-bind:is-published="post.isPublished"></sub-component>
<!-- 即便数组是静态的,我们仍然需要'v-bind'来告诉Vue.js --> <!-- 这是一个JavaScript表达式而不是一个字符串. --> <sub-component v-bind:comment-ids="[234, 266, 273]"></sub-component> <!-- 用一个变量进行动态赋值. --> <sub-component v-bind:comment-ids="post.commentIds"></sub-component>
<!-- 即便对象是静态的,仍然需要'v-bind'来告诉Vue.js --> <!-- 这是一个JavaScript表达式而不是一个字符串. --> <sub-component v-bind:author="{ name: 'Veronica', company: 'Meridian Dynamics' }"></sub-component> <!-- 用一个变量进行动态赋值. --> <sub-component v-bind:author="post.author"></sub-component>
<template id="subUserId"> <div> <p>name: {{ userAttr.name }}</p> <p>age: {{ userAttr.age }}</p> </div> </template> <div id="app"> <!-- 传入用户对象 --> <user-component :user="user"></user-component> </div> <script> Vue.component('user-component', { props: ['userAttr'], template: '#subUserId' }); const vm = new Vue({ el: "#app", data: { user: { name: '张三', age: 12 } } }); </script>
<!-- 定义模板 --> <template id="templateIn"> <div> <!-- 初始值方式 --> <p> <span>传入的 counter: {{ counter }}</span><br> sub Counter: <input v-model="subCounter" /><br> <span>子组件更新 counter: {{ subCounter }}</span> </p> <!-- 计算属性方式 --> <p> <span>传入的 size: {{ size }}</span><br> subSize: <input v-model="computeSize" /><br> <span>子组件更新 size: {{ computeSize }}</span> </p> </div> </template> <div id="app"> counter: <input v-model="counter" /><br> size: <input v-model="size" /> <sub-test :counter="counter" :size="size"></sub-test> </div> <script> const subVue = { props: ['counter', 'size'], // 定义prop属性接收父组件的值 data: function() { return { subCounter: this.counter // 给本地属性赋值 }; }, computed: { computeSize: { get: function() { return 'result -> ' + this.size; }, set: function(newValue) { // 不能响应到父组件,会抛出异常 this.size = newValue.slice('result -> '.length); } } }, template: '#templateIn' }; const vm = new Vue({ el: "#app", data: { counter: 12, size: 10 }, components: { 'sub-test': subVue } }); </script>
<!-- 定义模板 --> <template id="templateIn"> <div> <span>{{ attr1 }}</span><br> <span>{{ attr2 }}</span><br> <span>{{ attr3 }}</span><br> <span>{{ attr4 }}</span><br> <span>{{ attr5.message }}</span><br> <span>{{ attr6 }}</span><br> </div> </template> <div id="app"> <son-component :attr1="a1" :attr2="a2" :attr3="a3" :attr4="a4" :attr5="a5" :attr6="a6"> </son-component> </div> <script> const SonComponent = { props: { attr1: Number, attr2: [String, Number], attr3: { type: String, required: true }, attr4: { type: Number, default: 10 }, attr5: { type: Object, default: function() { return { message: 'hello' }; } }, attr6: { type: String, validator: function(value) { // 这个值必须匹配下列字符串中的一个 return ["success", "warning", "danger"].indexOf(value) !== -1; } } }, template: '#templateIn' }; const vm = new Vue({ el: "#app", components: { SonComponent }, data: { a1: 1, a2: 'hello', a3: 'world', a4: 11, a5: { message: "hai" }, a6: 'success' } }); </script>当 prop 验证失败时,Vue.js 将会发出一个控制台警告。
<!-- 定义模板 --> <template id="template1"> <div> {{ personAttr.firstName }} {{ personAttr.lastName }} </div> </template> <div id="app"> <son-component :person-attr="person"></son-component> </div> <script> function Person(first, last) { this.firstName = first; this.lastName = last; } const SonComponent = { template: '#template1', props: { personAttr: { type: Person, validator: function(value) { return value instanceof Person; } } } }; const vm = new Vue({ el: "#app", components: { SonComponent }, data: { person: new Person("san", "zhang") } }); </script>
<!-- 定义模板 --> <template id="template1"> <div class="subClass" name="subName">子组件</div> </template> <div id="app"> <son-component :notprop="notPropValue" :class="clsValue" :name="nameValue"> </son-component> </div> <script> const SonComponent = { template: '#template1' }; const vm = new Vue({ el: "#app", data: { notPropValue: "hello", clsValue: "parentClass", nameValue: "parentName" }, components: { SonComponent } }); vm.$data.notPropValue = "hai"; </script>渲染代码如下:
<div notprop="hai" class="parentclass subclass" name="parentName">子组件</div>div 中的 notprop="hai" 是从 son-component:notprop="notPropValue"/son-component 传递过去的。
<div id="app"> <son-component test="Value" required placeholder="请输入姓名"></son-component> </div> <script> Vue.component('SonComponent', { inheritAttrs: false, template: '<div><input type="text" v-bind="$attrs"/></div>' }); const vm = new Vue({ el: '#app' }); </script>
本文链接:http://task.lmcjl.com/news/13280.html