Vue组件

一、组件的创建方式

①使用 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

转载于:https://www.cnblogs.com/laomi233/p/9366581.html