澳门威利斯人_威利斯人娱乐「手机版」

来自 澳门威利斯人 2019-08-17 21:37 的文章
当前位置: 澳门威利斯人 > 澳门威利斯人 > 正文

Vue组件初探,Vue组件开发初探

登记贰个组件

注册三个组件

有三种方法得以登记一个零件,第一种是全局注册,第三种是一些注册

# 全局注册
Vue.component('my-component',{
    template: 'Hello'
})

# 局部注册
var child = {
    template: 'Hello'
}
new Vue({
    // ···
    components:{
        my-component: child
    }
})

注意:组件的注册应当要在Vue实例创制以前

使用Vue.js举行项目支出,那确定会动用基于组件的开垦方式,这种格局实在给支付和有限支撑带来的早晚的便利性,但万一涉嫌到零部件之间的数量与气象传递交互,正是一件麻烦事了,特别是面临有一大堆表单的页面。

有三种办法能够登记一个零件,第一种是大局注册,第三种是有的注册

使用组件

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

当我们要求选取到data时,data必须是一个函数,不然将会报错,那是Vue的一个条条框框,如下

Vue.component('my-component',{
    template: '{{message}}',
    data:function(){
        return {message:'hello'}
    }
})

在此处记录一下自己平日常用的管理方式,那篇文章首要记录老爹和儿子组件间的数据传递,非父亲和儿子组件主要通过Vuex管理,这篇文章权且不作表达。

# 全局注册
Vue.component('my-component',{
  template: 'Hello'
})

# 局部注册
var child = {
  template: 'Hello'
}
new Vue({
  // ···
  components:{
    my-component: child
  }
})

零件间新闻传递

当我们封装了组件A,然则组件A又嵌套了组件B,这时候组件AB产生了父亲和儿子组件的关联,大家相应怎么来让父组件传递音讯给子组件呢,这里运用了三个属性值props,如下

Vue.component('my-component',{
    props: ['message']
    template: '{{message}}'
})

# 通过props传递消息给子组件
<my-component message="Hello"></my-component>

地点的例证,大家因此props传递了参数给子组件,确实能改换子组件的值,但是,倘诺大家有这么贰个渴求,props的值是动态改动的,那么这种静态字面量传递参数的格局就不能够满足大家的急需了。如下将表明什么进行动态的props值设定

<div id="app">
    <input v-model="parentMsg"><br>
    <my-component v-bind:message="parentMsg">
</div>

此间经过v-bind的授命,将大家的message与parentMsg实行绑定,那样,当大家的parentMsg改换时,message将能实时退换

与文书档案里给的方案同样,父组件向子组件传递数据首要透过 props,子组件向父组件传递数据首要通过触发器 $emit(),只是在用法上会有个别不相同。

小心:组件的挂号必供给在Vue实例创建从前

自定义事件

父子组件之间如若经过props来传递数据的话,那么如同只可以实行单向的数目传递,只可以从父组件向子组件传递,若是我们必要从子组件传递音信回去,那么就需求用到自定义事件了

# 使用v-on绑定自定义事件
Vue.component('my-component',{
    template: '<button v-on:click="increment">{{counter}}</button>',
    data: function(){
        return {counter: 0}
    },
    methods: {
        increment: function(){
            this.counter  = 1;
            this.$emit(increment);
        }
    }
})
new Vue({
    el: '#app',
    data: {
        // ···
        total:0
    },
    methods: {
        // ···
        incrementTotal: function(){
            this.total  = 1;

        }
    }
})

<div id="app">
    // ···
    <p>{{total}}</p>
    <my-component v-on:increment="incrementTotal"></my-component>
</div>

此地,大家点击开关,按钮的显得的数值将会改换,同一时间,total的值也会动态的变动,那正是子组件回传数据的实例,大家点击按键时,将会首先试行button的onclick方法,在onclick方法里面,通过this.$emit('increment')来进行大家自定义的风云,若是大家须求在$emit中加多参数,那么我们将要在$on()中打开回调的管理

大家吸收接纳来自定义贰个表单输入控件,大家在输入框中输入音讯,同一时间在P标签中显示出来。
此处我们平时使用的

v-model="message"

其实是上边语句的叁个简化版本,约等于语法糖

v-bind:value="message" v-on:input="message = arguments[0]"
或者
v-bind:value="message" v-on:input="message = $event.target.value"

这便是说自定义表单控件大家须要干什么呢?

为了让v-model生效,我们须要在子组件中定义二个value的性质,还应该有三个监听新值发生的input事件
来拜见大家的自定义控件

<my-input label="Message" :value="message" @input="message = arguments[0]"></my-input>

在地点,咱们通过 :value="message" 绑定贰个value使其与上一级组件的message相挂钩,前边这么些 v-on:input 是子组件定义的平地风波,事件名能够团结定义,arguments[0] 是组件自定义时传出的首先个参数

一体化代码如下:

# 使用自定义事件的表单输入控件
Vue.component('my-input',{
    template: '
    <div>
    <label>{{label}} :</label>
    <input v-bind:value="value" v-on:input="onInput"></input>
    </div>
    '
    ,
    props:['value','label'],
    methods:{
        onInput:function(event){
            this.$emit('input',event.target.value);
            // this.$emit('input')
        }
    }

})

<div id="app">
    <p>{{message}}</p>
    <my-input label="Message" v-model="message"></my-input><br>
    <!-- <my-input label="Message" :value="message" @input="message = arguments[0]"></my-input> -->

</div>

小编们在概念内部事件时,调用到了$emit(),为了让message能动态改动,大家需求将输入的参数回传回去,那样本领使表面组件与大家的表单控件显示同一

Vue组件的就先写到那,接下去还会有事件分发,就接下去再写。由于通晓的两样,也可能有写得不得了的,所以有不当的地点请指正。Ali噶多

1、传递基本类型数据

行使组件

当子组件内容比较少时,会直接传送基本项目数据,平时为String, Number, Boolean两种。

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

先看个例子:

当大家要求运用到data时,data必须是二个函数,不然将会报错,那是Vue的一个平整,如下

<!-- 父组件 parent.vue -->

<template>
  <div class="parent">
    <h3>问卷调查</h3>
    <child v-model="form.name"></child>
    <div class="">
      <p>姓名:{{form.name}}</p>
    </div>
  </div>
</template>

<script>
  import child from './child.vue'

  export default {
    components: {
      child
    },
    data () {
      return {
        form: {
          name: '请输入姓名'
        }
      }
    }
  }
</script>



<!-- 子组件 child.vue -->

<template>
  <div class="child">
    <label>
      姓名:<input type="text" :value="currentValue" @input="changeName">
    </label>
  </div>
</template>

<script>
  export default {
    props: {
      // 这个 prop 属性必须是 valule,因为 v-model 展开所 v-bind 的就是 value
      value: ''
    },
    methods: {
      changeName (e) {
        // 给input元素的 input 事件绑定一个方法 changeName 
        // 每次执行这个方法的时候都会触发自定义事件 input,并且把输入框的值传递进去。
        this.$emit('input', e.target.value)
      }
    }
  }
</script>
Vue.component('my-component',{
  template: '{{message}}',
  data:function(){
    return {message:'hello'}
  }
})

给子组件的 input 事件绑定一个主意 changeName,每回试行这些措施的时候都会触发自定义事件 input,並且把输入框的值传递进入。

零件间音讯传递

父组件通过 v-model 指令绑定八个值,来接收子组件传递过来的数量。但如此只是父组件响应子组件的数目,若是还要子组件响应父组件传递的数码,就供给给子组件定义二个props属性 value,並且那本性子必须是 value,不能够写个其余单词。

当我们封装了组件A,然则组件A又嵌套了组件B,这时候组件AB产生了老爹和儿子组件的涉嫌,大家理应怎么来让父组件传递音讯给子组件呢,这里运用了七个属性值props,如下

v-model 其实正是一个语法糖,详细情形能够参见动用自定义事件的表单输入组件。

Vue.component('my-component',{
  props: ['message']
  template: '{{message}}'
})

# 通过props传递消息给子组件
<my-component message="Hello"></my-component>

2、传递引用类型数据

地点的例证,大家透过props传递了参数给子组件,确实能退换子组件的值,可是,假若大家有如此三个须求,props的值是动态更动的,那么这种静态字面量传递参数的措施就不能够满足大家的要求了。如下将注明怎样开始展览动态的props值设定

当子组件里的剧情比比较多时,比方子组件有多个表单成分,要是还像上面那样给各类表单成分绑定值,那将要写过多双重代码了。所以这一年一般传递的是贰个对象,传值的基本原理不改变,不过写法上会有些差别。

本文由澳门威利斯人发布于澳门威利斯人,转载请注明出处:Vue组件初探,Vue组件开发初探

关键词: 澳门威利斯人 Vue集结号-... 前端笔记本