Vue组件

2018-07-25 13:19:42来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

一、组件的创建方式

①使用 Vue.extend 来创建全局的Vue组件

var com1 = Vue.extend({ template: '<h3>这是使用 Vue.extend 创建的组件</h3>' })
Vue.component('myCom1', com1);

②直接使用 Vue.component 创建出来的组件

Vue.component('mycom2', {  template: '<div><h3>这是直接使用 Vue.component 创建出来的组件</h3<span>123</span></div>'})

③在 被控制的 #app 外面,使用 template 元素,定义组件的HTML模板结构

<template id="tmpl"></template>
Vue.component('mycom3', {template: '#tmpl'})
<mycom3></mycom3><!--这种方式写组件,有提示,而且内容比较多时分配写到外面,观感更佳-->

④创建私有组件

components: { login: { template: '<h1>这是私有组件</h1>'}}
<login></login>

注意:不论是哪种方式创建出来的组件,组件的 template ,属性指向的模板内容,必须有且只能有唯一的一个根元素

二、组件中的data和methods

组件里的data:

①组件可以有自己的 data 数据

②组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法

③组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行

④组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样

示例:

data: function () { return {  msg: '这是组件的中data定义的数据' } }

组件里的methods:

methods: {  increment() {  this.count++ } }

三、组件的切换

常见

<login v-if="flag"></login>
<register v-else="flag"></register>
<a href="" @click.prevent="flag=false/true">注册</a>

Vue提供了 component ,来展示对应名称的组件

<component :is="comName"></component><!--component 是一个占位符, :is 属性,可以用来指定要展示的组件的名称-->
<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>

四、父向子组件的单向通信

注意:默认子无法获得父的data数据和methods方法

父向子传递值(data):

①父组件,可以在引用子组件的时候, 通过 属性绑定(v-bind:) 的形式, 把 需要传递给 子组件的数据,以属性绑定的形式,传递到子组件内部,供子组件使用

<com1 v-bind:parentmsg="msg"></com1>

②再把父组件传递过来的 parentmsg 属性,先在 props 数组中,定义一下,这样,才能使用这个数据

props: ['parentmsg']

③使用

template: '<h1>这是子组件---{{parentmsg}}</h1>';

父向子传递方法(methods)

①父组件向子组件 传递 方法,使用的是 事件绑定机制v-on, 当我们自定义了 一个 事件属性之后,那么,子组件就能够,通过某些方式,来调用 传递进去的 这个 方法了

<com2 @func="show"></com2>

②私有组件的话,不用注册,外部组件需要在用到父组件注册一下

③当点击子组件的按钮的时候,如何 拿到 父组件传递过来的 func 方法,并调用这个方法?

this.$emit('func', this.sonmsg)

五、获取DOM节点和组件的引用

①给节点或组件写下ref标记,并起名字,ref="myh3"

②调用:通过this.$refs.myh3调用,可调用组件的data和methods,this.$refs.mylogin.msg

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:用mongols轻松打造websocket应用

下一篇:Headless Chrome:服务端渲染JS站点的一个方案【上篇】【翻译】