Vue组件的一些随笔

最新推荐文章于 2020-09-05 20:18:11 发布

Huhui-coder

最新推荐文章于 2020-09-05 20:18:11 发布

阅读量116

点赞数

分类专栏： VUE 文章标签：组件

本文链接：https://blog.csdn.net/qq_40299179/article/details/79995794

版权

VUE 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

今天，来看下组件，首先，我们先直接来看一个例子、

<body>
<div id="app">

<my-component></my-component>
</div>
</body>
<script src="./vue.js"></script>
<script>

// 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
})

// 2.注册组件，并指定组件的标签，组件的HTML标签为<my-component>
Vue.component('my-component', myComponent)

new Vue({
el: '#app'
});

</script>

Vue.extend：这个方法就是创建一个未挂载的实例，而我们这里往他选项对象里，写了一个template也就是组件模板。然后用 Vue.component('my-component', myComponent)，注册组件，第一个参数为组件标签，第二个参数为组件名称，我们是直接在实例之外注册的，这被称为全局组件，它的作用域为全局，在任何一个实例上都可用。

<body>
<div id="app">

<my-component></my-component>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1.创建一个组件构造器
var myComponent = Vue.extend({
template: '<div>This is my first component!</div>'
})

new Vue({
el: '#app',
components: {
// 2. 将myComponent组件注册到Vue实例下
'my-component' : myComponent
}
});
</script>

这是我们注册的局部组件，同样也是使用组件构造器的方式因为它是在Vue这个实例中注册的，在其他的el元素挂载点会失效。

接下来，来讲一下语法糖，原来啊，Vue官方觉得以上面这种方式创建组件太过于麻烦，于是，允许我们用 Vue.component('my-component',{
template: '<div>This is my first component!</div>'
});的方式来快捷创建组件。

<body>
<div id="app">

<my-component></my-component>
</div>
</body>
<script src="./vue.js"></script>
<script>
Vue.component('my-component',{
template: '<div>This is my first component!</div>'
});
new Vue({
el: '#app'

});

</script>

再来看看一些特殊情况；

比如说，Vue组件的模板在某些情况下会受到HTML的限制，比如说，<table>标签下只能是<tr>,<td>之类的，我们可使用is属性来挂载组件；例子如下：

<body>
<div id="app">

<table>
<tbody is="my-component">
</table>
</div>
</body>
<script src="./vue.js"></script>
<script>
Vue.component('my-component',{
template: '<div>This is my first component!</div>'
});
new Vue({
el: '#app'

});

</script>

再一个；

在组件中像其他VUE实例那样，使用选项对象时，注意，data的类型必须是函数，且有返回值；

Vue.component('my-component',{

templated:'<div>{{msg}}</div>',

data:function(){

return {

msg:'组件内容'

}

Huhui-coder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue组件的一些随笔

今天，来看下组件，首先，我们先直接来看一个例子、&lt;body&gt; &lt;div id="app"&gt; &lt;!-- 3. #app是Vue实例挂载的元素，应该在挂载元素范围内使用组件--&gt; &lt;my-component&gt;&lt;/my-component&gt; &lt;/div&gt;
复制链接

扫一扫

专栏目录