6-vue-component

最新推荐文章于 2024-06-21 11:09:47 发布

mao_mao37

最新推荐文章于 2024-06-21 11:09:47 发布

阅读量257

点赞数

分类专栏： VUE.js

本文链接：https://blog.csdn.net/mao_mao37/article/details/88996843

版权

VUE.js 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

组件：

data属性必须是一个函数

全局和局部的作用域问题：只要变量是组建内部的，这些变量就必须是局部的，而在外部html结构中引用的变量，都引用的改挂在下的实例里边的变量

Vue中所谓的全局指的是该挂载下的区域；

全局组件：构造器外定义

全局组件必须写在Vue实例创建之前，才在该根元素下面生效；

组件处于全局下不可以添加默认事件，要用全局的事件函数，必须父子通信

<body>
<div id="app">
<my-component></my-component>
</div>
<div id="app1">
    <my-component></my-component>

</div>
<script>
Vue.component("my-component",{
    template:"<h1>我是全局组件</h1>"
});
new Vue({
    el:"#app"
});
new Vue({
    el:"#app1"
})
</script>
</body>

渲染结果：

<div id="app">
    <h1>我是全局组件</h1>
</div>
<div id="app1">
    <h1>我是全局组件</h1>
</div>

局部组件：构造器内部定义

建议：因为嵌套比较深，建议对象定义在全局变量中，这样代码结构会比较好

<body>
<div id="app1">
    <child-component></child-component>
</div>
<script>
    var child={
        template:"<h1>我是局部组件</h1>"
    };
    new Vue({
        el: "#app1",
        components:{
            "child-component":child
        }
    });
</script>
</body>

当使用DOM作为模板时（例如将el选项挂载到一个已经存在的元素上），会受到html的一些限制。

因为Vue只有在浏览器解析和标准化html之后，才能获取模板内容。尤其像这些元素：<ul><ol><table><select>限制了能被他包裹的元素，而一些像<option>这样的元素只能出现在某些其他元素内部。

自定义组件<my-row>被认为是无效的内容，因此在渲染的时候会导致错误。

对于列表类的组件模板，可使用特殊的is属性：

<body>
<div id="app1">
<ul>
    <li is="my-component"></li>
</ul>
</div>
<script>
 Vue.component("my-component",{
     template:"<h1>{{message}}</h1>",
     data:function(){
         return {
             message:"hello world"
         }
     }
 });
 new Vue({
     el:"#app1"
 })
</script>
</body>

渲染结果

全局组件不可以直接添加默认事件，要用全局的时间函数，必须父子通信：

<body>
<div id="app1">
<my-component @click="add3"></my-component>
</div>
<script>
 Vue.component("my-component",{
     template:"<button @click='add3'>" +
     "{{message}}</button>",
     data:function(){
         return {
             message:"hello world"
         }
     }
 });
 new Vue({
     el:"#app1",
     methods:{
         add3:function(){
             alert("我是全局")
         }
     }
 })
</script>
</body>

上例并不能弹出“我是全局”弹出框，而是会报错

参考博客：https://segmentfault.com/a/1190000011465462

mao_mao37

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6-vue-component

组件：data属性必须是一个函数全局和局部的作用域问题：只要变量是组建内部的，这些变量就必须是局部的，而在外部html结构中引用的变量，都引用的改挂在下的实例里边的变量Vue中所谓的全局指的是该挂载下的区域；全局组件：构造器外定义全局组件必须写在Vue实例创建之前，才在该根元素下面生效；组件处于全局下不可以添加默认事件，要用全局的事件函数，必须父子通信<body...
复制链接

扫一扫

专栏目录