vue学习—组件

转载 2018年04月17日 10:59:48
  1. 如下代码,建立父子组件关系时报错: Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.  这个错误翻译为:模板语法错误组件模板应该正好包含一个根元素,如果你使用的是v-if多元素,使用v-else-if链他们。错误原因在于vue模板只支持一个元素,不能并列包含两个及以上,也就是说在worldWorld这个父组件中,template选项里面不应该同级地包含多个标签元素,把<city></city>元素放在p标签里面或者把p元素与city元素同时放进一个div里面就Ok了,这样就建立了Vue实例(爷爷)—>worldWorld父组件(父亲)—>city子组件(孙子)之间的关系。
    <body>
    <h1>组件03</h1>
    <div id="app">
    <world></world>
    </div>
    <script>
    city = {
    template: "<div>This is my home city!</div>",
    }
    worldWorld = {
    template: `
    <p>父子组件关系的搭建</p>
    <city></city>
    `,
    components: {
    "city": city
    }
    }
    var app = new Vue({ //初始化根实例
    el: "#app",
    data: {
    message: "xsdsfds"
    },
    components: {
    "world": worldWorld
    }
    })
    </script>
    </body>
  2. 通过使用Vue内置的component标签动态改变模板,并对其 is 特性进行动态绑定,你可以在同一个挂载点动态切换多个组件:
    <body>
    <h1>组件04</h1>
    <div id="app">
    <component :is="who"></component>
    </div>
    <script>
    pA = {
    template: "<div>this is pA</div>",
    data: function () {
    return {
    a: 11
    }
    }
    };
    pB = {
    template: "<div>this is pB</div>"
    };
    pC = {
    template: "<div>this is pC</div>"
    };
    pD = {
    template: "<div>this is pD</div>"
    }
    var app = new Vue({ //初始化根实例
    el: "#app", //爷爷
    data: {
    who: "pB"
    },
    components: {
    "pA": pA,
    "pB": pB,
    "pC": pC,
    "pD": pD
    }
    })
    </script>
    </body>

  3. 代码如下,使用Vue内置的component标签动态改变模板时容易出现的错误:Component template requires a root element, rather than just text. 错误翻译:组件模板需要一个根元素,而不仅仅是文字。所以这时只要给pA的template选项加上一个根元素标签如"<div>this is pA{{a}}</div>"即可>。
    <body>
    <h1>组件04</h1>
    <div id="app">
    <component :is="who"></component>
    </div>
    <script>
    pA = {
    template: "this is pA{{a}}",
    data: function () {
    return {
    a: 11
    }
    }
    };
    var app = new Vue({
    el: "#app",
    data: {
    who: "pA"
    },
    components: {
    "pA": pA
    }
    })
    </script>
    </body>

Vue-组件学习

全局注册组件的过程 1、注册(创建)一个全局组件,使用 Vue.component(tagName, options) Vue.component('my-component', { // 选项}...
  • itzhengmaolin
  • itzhengmaolin
  • 2017-07-25 18:19:46
  • 162

Vue.js 学习10 Element基于Vue2.0的组件库

官网: http://element.eleme.io/#/zh-CN一、安装npmnpm i element-ui -SCDN
  • xundh
  • xundh
  • 2017-06-03 17:43:20
  • 955

vue学习系列-完成一个分页组件的封装

分页是我们前端开发中经常要用到的一个组件,也有很多人提供了这样的组件,比如jquery.page.js、layer等等,都比较好用,几天我们就自己用vue来撸一个page组件,首先先来看看最终完成的效...
  • u012409848
  • u012409848
  • 2017-05-10 21:06:12
  • 193

VUE 快速入门心得——组件开发

由于近期最近工作上的调整,有段日子没有更新博客了,现在工作稳定,接着给大家带来学习vue的心得。不废话,今天我们就VUE组件开发谈谈一些心得。什么是组件?在说之前我们先搞清楚什么是组件?这样对我们下边...
  • baidu_38492440
  • baidu_38492440
  • 2017-07-21 22:51:28
  • 1517

Vue组件踩坑与心得

事实上的确如此,产品需求总是千奇百怪。正如我公司现在的产品,引用的是elemen-ui的库,但是无法级联多选,下拉多选的展现形式不对,穿梭框无法上下移动等各种需求逼迫我们只能自己去写组件实现了。 ...
  • qq_40479190
  • qq_40479190
  • 2017-10-29 17:56:04
  • 173

vue.js 2.0父子组件学习入门套路

前面已经了解过vue的组件化开发了,现在来了解一下父子组件。 先来2个子组件 myname.vue 内容如下: 我的名字是{{name}} export default{ ...
  • github_26672553
  • github_26672553
  • 2016-10-14 20:36:05
  • 12464

vue学习视频.txt

  • 2018年01月03日 12:12
  • 49B
  • 下载

Vue.js学习系列(八)---如何使用组件

一、什么是组件 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树 组件听起来比较抽象,实...
  • bwf_erg
  • bwf_erg
  • 2017-02-23 19:14:55
  • 601

vue递归组件

递归组件 组件在它的模板内可以递归地调用自己,不过,只有当它有 name 选项时才可以 //当你利用Vue.component全局注册了一个组件, 全局的ID作为组件的 name 选项...
  • yintianqin
  • yintianqin
  • 2017-09-06 14:27:07
  • 629

VUE整理(五)

  • 2017年12月06日 16:28
  • 53KB
  • 下载
收藏助手
不良信息举报
您举报文章:vue学习—组件
举报原因:
原因补充:

(最多只允许输入30个字)