Vue.component('my-component', { template: '<div>A custom component!</div>' }); // 创建根实例 new Vue({ el: '#example' }); <div> <my-component></my-component> </div>
7.使用prop 传递数据
实例一：
Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以用 `this.msg` 设置 template: '<span>{{ msg }}</span>' }); <child msg="hello!"></child>
实例二：
Vue.component('child', { // camelCase in JavaScript props: ['myMessage'], template: '<span>{{ myMessage }}</span>' }); <!-- kebab-case in HTML --> <child my-message="hello!"></child>
8.动态props
<div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </div>
使用 v-bind 的缩写语法通常更简单：
<child :my-message="parentMsg"></child>
9.Prop 绑定类型
prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。不过，也可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定：
比较语法：
<!-- 默认为单向绑定 --> <child :msg="parentMsg"></child> <!-- 双向绑定 --> <child :msg.sync="parentMsg"></child> <!-- 单次绑定 --> <child :msg.once="parentMsg"></child>
其他实例：
<modal :show.sync="showModal"> <h3 slot="header">custom header</h3> </modal> </div>
10.Prop 验证
组件可以为 props 指定验证要求。当组件给其他人使用时这很有用，因为这些验证要求构成了组件的 API，确保其他人正确地使用组件。此时 props 的值是一个对象，包含验证要求：
Vue.component('example', { props: { // 基础类型检测 （`null` 意思是任何类型都可以） propA: Number, // 必需且是字符串 propB: { type: String, required: true }, // 数字，有默认值 propC: { type: Number, default: 100 }, // 对象/数组的默认值应当由一个函数返回 propD: { type: Object, default: function () { return { msg: 'hello' } } }, // 指定这个 prop 为双向绑定 // 如果绑定类型不对将抛出一条警告 propE: { twoWay: true }, // 自定义验证函数 propF: { validator: function (value) { return value > 10 } }, // 转换函数（1.0.12 新增） // 在设置值之前转换值 propG: { coerce: function (val) { return val + '' // 将值转换为字符串 } }, propH: { coerce: function (val) { return JSON.parse(val) // 将 JSON 字符串转换为对象 } } } });
其他实例：
Vue.component('modal', { template: '#modal-template', props: { show: { type: Boolean, required: true, twoWay: true } } });
11.使用slot分发内容
<slot> 元素作为组件模板之中的内容分发插槽。这个元素自身将被替换。
有 name 特性的 slot 称为命名 slot。 有 slot 特性的内容将分发到名字相匹配的命名 slot。
例如，假定我们有一个 multi-insertion 组件，它的模板为：
<div> <slot></slot> <slot></slot> <slot></slot> </div>
父组件模板：
<multi-insertion> <p slot="one">One</p> <p slot="two">Two</p> <p>Default A</p> </multi-insertion>
渲染结果为：
<div> <p slot="one">One</p> <p>Default A</p> <p slot="two">Two</p> </div>
您可能感兴趣的文章: