全局注册:
要注册一个全局组件,可以使用
Vue.component(tagName, options)
。
注意确保在初始化根实例之前注册组件:
html代码:
<div id="example"> <my-component></my-component> </div>
JS代码:
// 注册 Vue.component(‘my-component‘, { template: ‘<div>A custom component!</div>‘ }) // 创建根实例 new Vue({ el: ‘#example‘ })
渲染为:
<div id="example"> <div>A custom component!</div> </div>
局部注册:
不必把每个组件都注册到全局。可以通过某个 Vue 实例/组件的实例选项 components
注册仅在其作用域中可用的组件:
var Child = { template: ‘<div>A custom component!</div>‘ } new Vue({ // ... components: { // <my-component> 将只在父组件模板中可用 ‘my-component‘: Child } })
注意点:
一:DOM 模板解析注意事项
当使用 DOM 作为模板时 (例如,使用 el
选项来把 Vue 实例挂载到一个已有内容的元素上),你会受到 HTML 本身的一些限制,因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意,像 <ul>
、<ol>
、<table>
、<select>
这样的元素里允许包含的元素有限制,而另一些像 <option>
这样的元素只能出现在某些特定元素的内部。在自定义组件中使用这些受限制的元素时会导致一些问题,例如:
<table> <my-row>...</my-row> </table>
自定义组件<my-row>
会被当作无效的内容,因此会导致错误的渲染结果。变通的方案是使用特殊的is
特性:
<table> <tr is="my-row"></tr> </table>
二、data 必须是函数
var Child={ template:‘<p>{{msg}}</p>‘, data:{ msg:‘lizhao‘ } }
当data时对象格式时,Vue 会停止运行,并在控制台发出警告,告诉你在组件实例中 data
必须是一个函数。因为组件实例共享同一个 data
对象,修改一个变量会影响所有组件!我们可以通过为每个组件返回全新的数据对象来修复这个问题:
var Child={ template:‘<p>{{msg}}</p>‘, data:function(){ return{ msg:‘lizhao‘ } } }
原文地址:https://www.cnblogs.com/superlizhao/p/8465850.html
时间: 2024-08-11 13:51:54