澳门网络娱乐游戏平台-澳门电子游戏娱乐网址-官方直营

Vue 组件

生龙活虎、表单输入绑定

什么是Vue组件

零件 (Component卡塔尔 是 Vue.js 最精锐的机能之风度翩翩。组件能够增添 HTML 成分,封装可接受的代码。在较高层面上,组件是自定义成分,Vue.js 的编写翻译器为它足够特殊效果。在有个别景况下,组件也能够是原生 HTML 成分的款型,以 is 性格扩充。

1.1、底子用法

您能够用 v-model 指令在表单控件成分上制造双向数据绑定。它会依附控件类型自动选择正确的点子来更新成分。就算某些奇妙,但 v-model 本质上只是是语法糖,它担任监听客户的输入事件以立异数据,并特地管理部分十二万分的事例。

v-model 并不关注表单控件初阶化所生成的值。因为它会接受 Vue 实例数据来作为具体的值。

注册

1.1.1、文本

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

vue.component全局注册

登记或获得全局组件。注册还或许会活动使用给定的id设置组件的名号

// 注册组件,传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注册组件,传入一个选项对象(自动调用 Vue.extend)
Vue.component('my-component', { /* ... */ })
// 获取注册的组件(始终返回构造器)
var MyComponent = Vue.component('my-component')

全局注册要担保在开端化根实例从前注册了组件

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

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})

1.1.2、多行文本

Multiline message is:
<p style="white-space: pre">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

在文书区域插值( <textarea></textarea> 卡塔尔国并不会生效,应用 v-model 来代替

components选项局地注册

不需求在大局注册各样组件。通过使用组件实例选项注册,能够使组件仅在另四个实例/组件的效率域中可用:

 const MyComponent = Vue.extend({
   template: '<div>A custom component!</div>'
 })

 new Vue({
    el: '#app',
    components: {
      'my-component': MyComponent
    },
    //注册局部组件,传入一个选项对象(自动调用 Vue.extend)
    //components: { 'my-component': { template: '<div>A custom component!</div>' } }
    template: '<my-component></my-component>'
})

1.1.3、复选框

单个勾选框,逻辑值:

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

Vue 组件。七个勾选框,绑定到同二个数组:

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
Checked names: {{ checkedNames }}

new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

以is性子扩大

当使用 DOM 作为模版时 (比方,将 el 选项挂载到一个已存在的要素上卡塔尔国, 你会直面 HTML 的有个别范围,因为 Vue 独有在浏览器深入剖判和标准 HTML 后手艺得到模版内容。尤其像这个要素 <ul>,<ol>,<table>,<select> 约束了能被它包裹的因素,而某些像 <option> 那样的要素只好出今后某个其余成分内部。
在自定义组件中采取那些受节制的要素时会引致部分题目,举例:

<table>
  <my-row>...</my-row>
</table>

自定义组件 <my-row> 被感觉是无效的内容,由此在渲染的时候会促成错误。变通的方案是接纳异乎平常的 is 属性:

const MyComponent = Vue.extend({
  template: '<p>Hello World!</p>'
})

new Vue({
  el: '#app',
  components: {
    'my-row': MyComponent
  },
  template: `
      <table>
        <tr is="my-row"></tr>
      </table>
    `
}) 

1.1.4、单选开关

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
Picked: {{ picked }}

data 选项

通过 Vue 构造器传入的种种选项大非常多都足以在组件布局器里用。但data 是八个不及,它必得是函数。
实质上,假设您那样做:

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

那就是说 Vue 会结束,并在调整台发出警报,告诉你在组件中 data 必须是一个函数。精晓这种法则的存在意义很有帮带,让我们如果用如下情势来绕开 Vue 的警戒:

<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>
var data = { counter: 0 }
Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // 技术上 data 的确是一个函数了,因此 Vue 不会警告,
  // 但是我们返回给每个组件的实例的却引用了同一个data对象
  data: function () {
    return data
  }
})
new Vue({
  el: '#example-2'
})

鉴于data是一个对象,多个零零器件都保持同一个data的援用。大家得以由此函数为各类组件再次回到崭新的 data 对象来消除那么些标题。

data: function () {
  return {
    counter: 0
  }
}

1.1.5、选取列表

澳门注册游戏,单选列表:

<select v-model="selected">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
Selected: {{ selected }}

多选列表(绑定到一个数组):

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
Selected: {{ selected }}

动态选项,用 v-for 渲染:

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
Selected: {{ selected }}

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

父亲和儿子组件通讯

在 Vue 中,父亲和儿子组件的涉嫌得以总计为 props down, events up。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送音讯。

澳门十三第娱乐官网平台 1

props-events.png

1.2、绑定 value

对此单选按键,勾选框及筛选列表选项, v-model 绑定的 value 常常是静态字符串(对于勾选框是逻辑值):

<!-- 当选中时,`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中时,`selected` 为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

可是有的时候大家想绑定 value 到 Vue 实例的一个动态属性上,当时能够用 v-bind 完成,并且这一个天性的值能够不是字符串。

prop

组件实例的功效域是孤立的。那意味不可能 (也不应该卡塔尔(英语:State of Qatar)在子组件的沙盘内直接援用父组件的多少。要让子组件使用父组件的数目,大家需求通过子组件的 props 选项,揭示对外的接口。

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样,prop 可以用在模板内
  // 同样也可以在 vm 实例中像“this.message”这样使用
  template: '{{ message }}'
})

1.2.1、复选框

<input
  type="checkbox"
  v-model="toggle"
  v-bind:true-value="a"
  v-bind:false-value="b"
>

// 当选中时
vm.toggle === vm.a
// 当没有选中时
vm.toggle === vm.b

camelCase vs kebab-case

HTML 本性是不区分朗朗上口写的。所以,当使用的不是字符串模版,camelCased (驼峰式卡塔尔(قطر‎ 命名的 prop 须求转移为相对应的 kebab-case (短横线隔绝式卡塔尔(قطر‎ 命名:

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '{{ myMessage }}'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>
```

#### 动态prop
在模板中,要动态地绑定父组件的数据到子模板的 props,与绑定到任何普通的HTML特性相类似,就是用 v-bind。每当父组件的数据变化时,该变化也会传导给子组件:
```
<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

1.2.2、单选按键

<input type="radio" v-model="pick" v-bind:value="a">

// 当选中时
vm.pick === vm.a

字面量语法 vs 动态语法

初读书人常犯的二个谬误是选拔字面量语法传递数值:

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>

因为它是多少个字面 prop,它的值是字符串 "1"
实际不是 number。若是想传递四个事实上的 number,须求选用 v-bind
,进而让它的值被充任 JavaScript 表达式总计:

<!-- 传递实际的 number -->
<comp v-bind:some-prop="1"></comp>

1.2.3、采纳列表设置

<select v-model="selected">
    <!-- 内联对象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// 当选中时
typeof vm.selected // -> 'object'
vm.selected.number // -> 123

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>

    <body>
        <div id="vm">
            <p>
                <label for="name">姓名</label>
                <input v-model="name" id="name" name="name" value="tom" />值:
                  {{name}}
            </p>
            <p>
                <label>爱好</label>
                <input type="checkbox" v-model="hobbies" value="代码" id="hobbies1" />
                <label for="hobbies1">代码</label>
                <input type="checkbox" v-model="hobbies" value="运动" id="hobbies2" />
                <label for="hobbies2">运动</label>
                <input type="checkbox" v-model="hobbies" value="音乐" id="hobbies3" />
                <label for="hobbies3">音乐</label> 值:{{hobbies.join(',')}}
            </p>
            <p>
                <label>性别</label>
                <input type="radio" v-model="sex" value="男" id="sex1" />
                <label for="sex1">男</label>
                <input type="radio" v-model="sex" value="女" id="sex2" />
                <label for="sex2">女</label>
                <input type="radio" v-model="sex" value="保密" id="sex3" />
                <label for="sex3">保密</label> 值:{{sex}}
            </p>
            <p>
                <label>精通</label>
                <select v-model="skill1">
                    <option value="Java">Java</option>
                    <option value="前端">前端</option>
                    <option value="Oracle">Oracle</option>
                    <option value="">--请选择--</option>
                </select>
                值:{{skill1}}
            </p>
            <p>
                <label>擅长</label>
                <select v-model="skill2" multiple="multiple" size="5">
                    <option value="C#">C#</option>
                    <option value="Ruby">Ruby</option>
                    <option value="Go">Go</option>
                    <option value="PHP">PHP</option>
                    <option value="python">python</option>
                </select>
                值:{{skill2}}
            </p>
            <p>
                <input type="checkbox" v-model="isAllow" id="isAllow" />
                <label for="isAllow">同意本网站协定</label> 值:{{isAllow}}
            </p>
            <p>
                <input type="checkbox" v-model="isOk" id="isOk" v-bind:true-value="yes" v-bind:false-value="no" />
                <label for="isOk">同意本网站协定</label> 值:{{isOk}}
            </p>
            <p>
                <input type="checkbox" v-model="isOk2" id="isOk2" v-bind:true-value="'yes'" v-bind:false-value="'no'" />
                <label for="isOk2">同意本网站协定</label> 值:{{isOk2}}
            </p>
            <p>
                <input type="radio" v-model="isSend" name="isSend" value="发送"/>发送
                <input type="radio" v-model="isSend" name="isSend" value="不发送"/>不发送
                <label>发送短信</label> 值:{{isSend}}
            </p>
            <p>
                <label>等级</label>
                <select v-model="grade">
                    <option :value="{level:1}">A级</option>
                    <option :value="{level:2}">B级</option>
                    <option v-bind:value="{level:3}">C级</option>
                </select>
                值:{{grade.level}}
            </p>
            <p>
                <label for="name">姓名</label>
                <textarea rows="5" cols="50">{{name}}</textarea>
            </p>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#vm",
                data: {
                    isShow: true,
                    name: "rose",
                    hobbies: ["代码"],
                    sex: '保密',
                    skill1: '',
                    skill2: ['PHP'],
                    isAllow: false,
                    isOk: "同意",
                    yes: '同意',
                    no: '不同意',
                    isOk2: "yes",
                    isSend:'不发送',
                    grade:{
                        name:"技术等级",
                        level:0
                    }
                }
            });
        </script>
    </body>

</html>

结果:

澳门十三第娱乐官网平台 2

单向数据流

prop 是单向绑定的:当父组件的性质变化时,将传输给子组件,不过不会反过来。这是为着防止子组件无意改过了父组件的情事——那会让动用的数据流难以精晓。

注意在 JavaScript 中目的和数组是引用类型,指向同一个内部存款和储蓄器空间,要是prop 是一个对象或数组,在子组件内部改动它会潜移默化父组件的气象。

笔者们应有幸免这种气象时有产生:

  • 概念一个有的变量,并用 prop 的值最初化它:
props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}
  • 概念贰个总结属性,管理 prop 的值并赶回。
props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

1.3、修饰符

prop验证

为组件的 props 钦命验证规格。假设传入的多少不符合条件,Vue 会发出警告。
要钦点验证规格,供给用对象的款型,而不能够用字符串数组:

Vue.component('example', {
  props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字,有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组/对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type 能够是下边原生结构器:

String
Number
Boolean
Function
Object
Array
Symbol

type 也能够是三个自定义结构器函数,使用 instanceof 检查测验。

1.3.1、.lazy

在私下认可情形下, v-model 在 input 事件中国共产党同输入框的值与数量,但您能够拉长叁个修饰符 lazy ,进而转换为在 change 事件中齐声:

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

澳门十三第娱乐官网平台,示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>
    <body>
        <div id="vm">
            <p>
                <label for="name">姓名</label>
                <input v-model="name" id="name" name="name" value="tom" /> 值:

            </p>
            <p>
                <label>姓名</label>
                <input v-model.lazy="name" value="tom" /> 值:

            </p>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#vm",
                data: {
                    name: "rose"
                }
            });
        </script>
    </body>

</html>

结果:

澳门十三第娱乐官网平台 3

非prop

所谓非 prop 属性,便是它能够一直传入组件,而不须要定义相应的 prop。
旗帜显明给组件定义 prop 是传参的推荐介绍情势,但组件的撰稿者并不总能预言到组件被使用的处境。所以,组件能够摄取大肆传入的属性,那么些属性都会被增多到组件的根成分上。

1.3.2、.number

借使想活动将顾客的输入值转为 Number 类型(假设原值的转移结果为 NaN 则赶回原值),能够增多一个修饰符 number 给 v-model 来管理输入值:

<input v-model.number="age" type="number">

那平日很有用,因为在 type="number" 时 HTML 中输入的值也再而三会回来字符串类型。

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>

    <body>
        <div id="vm">
            <p>
                <label for="age">年龄</label>
                <input v-model="age" id="age" name="age" type="number" /> 值:{{age}}
            </p>
            <p>
                <label for="age">年龄</label>
                <input v-model.number="age" id="age" name="age"/> 值:{{age}}
                类型:{{typeof(age)}}
            </p>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#vm",
                data: {
                    name: "rose",
                    age: "18"
                }
            });
        </script>
    </body>

</html>

结果:

澳门十三第娱乐官网平台 4

澳门十三第娱乐官网平台 5

自定义事件

每一个 Vue 实例都落到实处了事件接口 (Events interface卡塔尔,即:

  • 应用 $on(eventName卡塔尔监听事件
  • 运用 $emit(eventName卡塔尔(قطر‎触发事件

1.3.2、.trim

要是要自行过滤顾客输入的来因去果空格,能够增加 trim 修饰符到 v-model 上过滤输入:

<input v-model.trim="msg">

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>表单</title>
    </head>

    <body>
        <div id="vm">
            <p>
                <label for="memo1">自我介绍</label>
                <input v-model="memo1" id="memo1" name="memo1" /> 值:{{memo1}}结束
            </p>
            <p>
            <label for="memo2">自我介绍</label>
                <input v-model.trim="memo2" id="memo2" name="memo2" /> 值:{{memo2}}结束
            </p>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#vm",
                data: {
                    name: "rose",
                    age: "18",
                    memo1:"  我是 一个 好学生 ",
                    memo2:"  我是一个好学生   ",
                }
            });
        </script>
    </body>

</html>

结果:

起来加载,trim未推行:

澳门十三第娱乐官网平台 6

校订后灵光:

澳门十三第娱乐官网平台 7

应用 v-on 绑定事件

父组件能够在使用子组件的地点一贯用 v-on 来监听子组件触发的风云。
无法用 $on 侦听子组件抛出的风浪,而必需在模板里直接用 v-on 绑定。

v-on 用在平凡成分上时,只好监听 原生 DOM 事件。用在自定义成分组件上时,也得以监听子组件触发的自定义事件。

1.4、在组件上选取 v-model

风姿罗曼蒂克经您还不精晓 Vue 的组件,能够临时跳过此处。
HTML 原生的输入元素类型并不总能满意供给。幸亏,Vue 的机件系统允许你创制具备完全自定义行为且可复用的输入组件。这一个输入组件以至能够和 v-model 一齐利用!要询问越来越多,请参阅组件指南开中学的自定义输入组件。

合法原版的书文:

构件系统是 Vue 的另三个至关首要概念,因为它是蓬蓬勃勃种浮泛,允许大家使用Mini、独立和平常可复用的构件创设大型应用。留心思忖,差不离狂妄等级次序的行使分界面都足以抽象为三个零件树:

澳门十三第娱乐官网平台 8

给组件绑定原生事件

神蹟,你可能想在某些组件的根元素上监听二个原惹祸件。能够动用 .native 修饰 v-on。比方:

<my-component v-on:click.native="doTheThing"></my-component>

v-on 监听组件上自定义事件,并不会绑定到其根成分

二、组件

.sync修饰符(在父亲和儿子组件数据模型之间实现双向数据绑定)

.sync 修饰符,只是作为一个编写翻译时的语法糖存在。它会被扩张为一个自动更新父组件属性的 v-on 侦听器。
常常来讲代码

<comp :foo.sync="bar"></comp>

会被扩充为:

<comp :foo="bar" @update:foo="val => bar = val"></comp>

当子组件供给更新 foo 的值时,它要求显式地接触三个更新事件

this.$emit('update:foo', newValue)

例如:

  const MyComponent = Vue.extend({
  template: `
    <div>
      <button @click="onClick">点击计数</button><p>{{count}}</p>
    </div>
  `,
  props: ['count'],
  data: function (params) {
    return {
      counter: this.count
    }
  },
  methods: {
    onClick: function () {
      this.counter += 1;
      //emit count更新事件
      this.$emit('update:count', this.counter);
    }
  }
})

new Vue({
  el: '#app',
  components: {
    'my-component': MyComponent
  },
  template: `
      <div>
         <p>{{total}}</p>
         <!-- 双向绑定count -->
         <my-component :count.sync="total"></my-component>
      </div>
    `,
  data: {
    total: 0
  }
}) 

2.1、什么是组件?

组件(Component)是 Vue.js 最强盛的效果与利益之大器晚成。组件能够增加 HTML 成分,封装可采取的代码。在较高层面上,组件是自定义成分, Vue.js 的编写翻译器为它助长特殊效果。在微微境况下,组件也足以是原生 HTML 元素的样式,以 is 天性扩大。

先看看二种概念组件的形式:

接收 v-model 绑定自定义表单组件

私下认可情状下,v-model 会绑定组件的 value 属性和监听 input 事件。
之所以要让自定义组件的 v-model 生效,它应有 (在 2.2.0+ 那是可布署的卡塔尔国:

  • 经受一个 value 属性
  • 在有新的值时触发 input 事件

自定义计数器组件例子:

const MyCounter = Vue.extend({
  template: `<div>
     <button @click="decreace">-</button>{{count}}<button @click="increace">+</button>
  </div>`,
  props: ['value'],
  data: function () {
    return {
      count: this.value
    }
  },
  methods: {
    decreace: function () {
      this.count -= 1;
      this.$emit('input', this.count)
    },
    increace: function () {
      this.count += 1;
      this.$emit('input', this.count)
    }
  }
})

new Vue({
  el: '#app',
  components: {
    'my-counter': MyCounter
  },
  template: `
      <div>
         <p>{{total}}</p>
         <!-- 双向绑定count -->
         <my-counter v-model="total"></my-counter>
      </div>
    `,
  data: {
    total: 0
  }
})

可是举个例子单选框、复选框之类的输入类型只怕把 value 属性用作了其余目标。model 选项来再一次包装v-model暗中认可绑定接口,能够就逃匿那样的冲突:

const SelectComp = Vue.extend({
  template: `
  <select @change="onSelect" v-model="selected">
    <option disabled value='0'>请选择</option>
    <option value="1">选择1</option>
    <option value="2">选择2</option>
    <option value="3">选择3</option>
  </select>
  `,
  data: function () {
    return {
      selected: ''
    }
  },
  //重新包装v-model绑定接口
  model: {
    prop: 'selected',
    event: 'select'
  },
  methods: {
    onSelect: function () {
      this.$emit('select', this.selected)
    }
  }
})

new Vue({
  el: '#app',
  components: {
    'my-select': SelectComp
  },
  template: `
      <div>
         <p>{{selected}}</p>
         <my-select v-model="selected"></my-select>
      </div>
    `,
  data: {
    selected: ''
  }
}) 

2.1.1、组件形式少年老成:使用script标签

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>组件</title>
    </head>

    <body>
        <div id="vm">
            <me-component1></me-component1>
        </div>
        <script type="text/x-template" id="template1">
            <div>这是一个组件</div>
        </script>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义全局的Vue组件
            Vue.component("me-component1",{
                template:"#template1"
            });

            var vm = new Vue({
                el: "#vm",
                data: {
                    name: "rose"
                }
            });
        </script>
    </body>

</html>

 

结果:

澳门十三第娱乐官网平台 9

只顾:使用<script>标签时,type钦定为text/x-template,目的在于告知浏览器那不是大器晚成段js脚本,浏览器在深入剖判HTML文书档案时会忽视<script>标签钦命义的内容。

非老爹和儿子组件通讯

在简约的场景下,能够应用八个空的 Vue 实例作为大旨事件总线:

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

2.1.2、组件方式二:使用template标签

 示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>组件</title>
    </head>

    <body>
        <div id="vm">
            <me-component1></me-component1>
        </div>
        <template id="template2">
            <div>这是另一个组件</div>
        </template>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义全局的Vue组件
            Vue.component("me-component1",{
                template:"#template2"
            });

            var vm = new Vue({
                el: "#vm",
                data: {
                    name: "rose"
                }
            });
        </script>
    </body>

</html>

 

结果:

 澳门十三第娱乐官网平台 10

动用Slot分发内容

为了抓实组件的可增加性和组合组件,我们能够利用Vue提供Slot分发内容来落到实处。
所谓的Slot内容分发就是把自定义成分内嵌的模版插入到子组件模板slot插座中。

澳门十三第娱乐官网平台 11

image.png

实例代码:

const MyChild = Vue.extend({
  template: `<h1>
    <!-- 默认插座,插入内容会替换掉slot,若没父模板中没有内容插入,则该备用内容会显示 -->
    <slot>h1内容</slot>
  </h1>`
})

new Vue({
  el: '#app',
  components: {
    'my-child': MyChild
  },
  template: `
  <div>
    <!-- 插入内容 -->
    <my-child>
      Hello world!
    </my-child>
    <!-- 无内容插入 -->
    <my-child></my-child>
  </div>
  `
})

效果:

澳门十三第娱乐官网平台 12

image.png

留心分发内容只在父效能域内编译(请看slot编写翻译内容)

2.1.3、组件情势一:使用vue文件

这种方法常用在vue单页应用(SPA)中。详细情形看官方网站:https://cn.vuejs.org/v2/guide/single-file-components.html
创制.vue后缀的公文,组件Hello.vue,放到components文件夹中

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '欢迎!'
    }
  }
}
</script>

app.vue

<!-- 展示模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>

<script>
// 导入组件
import Hello from './components/Hello'

export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>
<!-- 样式代码 -->
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

多个slot

当父模板中有多少个内容要插入到子模板中不相同职位时,大家得以:

  • 在父模板中剧情根成分增多slot属性,属性值为slot小名
  • 子模板中slot标签加多name属性别称

子模板:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父模板:

<app-layout>
  <h1 slot="header">这里可能是一个页面标题</h1>
  <p>主要内容的一个段落。</p>
  <p>另一个主要段落。</p>
  <p slot="footer">这里有一些联系信息</p>
</app-layout>

渲染结果:

<div class="container">
  <header>
    <h1>这里可能是一个页面标题</h1>
  </header>
  <main>
    <p>主要内容的一个段落。</p>
    <p>另一个主要段落。</p>
  </main>
  <footer>
    <p>这里有一些联系信息</p>
  </footer>
</div>

2.2、使用组件

作用域插槽

功用域插槽,小编的精晓其实正是把子组件模板中的slot看作七个“组件”,所以子组件能够向slot传递数据,就疑似向组件绑定数据生龙活虎致。而该slot“组件”的沙盘模拟经营注解在父级中,是独具非常品质scope 的 <template> 成分,表示它是作用域插槽的模板。scope 的值对应贰个这两天变量名,此变量选择从子组件中传送的 props 对象:

<div class="parent">
  <child>
    <template scope="props">
      hello from parent
      {{ props.text }}
    </template>
  </child>
</div>

在子组件中,只需将数据传递到插槽,就疑似您将 props 传递给组件同样:

<div class="child">
  <slot text="hello from child"></slot>
</div>

渲染以上结果,获得的输出会是:

<div class="parent">
  <div class="child">
    hello from parent
    hello from child
  </div>
</div>

2.2.1、注册

前面说过,大家能够通过以下方法制造三个 Vue 实例:

new Vue({
  el: '#some-element',
  // 选项
})

要注册七个大局组件,你可以运用 Vue.component(tagName, options)。 例如:

Vue.component('my-component', {
  // 选项
})

对此自定义标具名,Vue.js 不强制供给遵照 W3C规则 (小写,并且带有一个短杠),固然固守那么些法规比较好。

零器件在注册之后,便足以在父实例的模块中以自定义成分<my-component></my-component> 的款式利用。要作保在最早化根实例 此前 注册了组件:

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

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 创建根实例
new Vue({
  el: '#example'
})

渲染为:

<div id="example">
  <div>A custom component!</div>
</div>

其他

2.2.2、局地注册

不用在大局注册种种组件。通过利用组件实例选项注册,能够使组件仅在另两个实例/组件的效能域中可用:

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }
})

这种封装也适用于其余可登记的 Vue 功用,如命令。

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>组件</title>
    </head>

    <body>
        <div id="vm">
            <me-component3></me-component3>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义局部的Vue组件
            var vm = new Vue({
                el: "#vm",
                data: {
                    name: "rose"
                },
                components: {
                    "me-component3": {
                        template: "<div>定义局部的Vue组件</div>"
                    }
                }
            });
        </script>
    </body>

</html>

结果:

澳门十三第娱乐官网平台 13

动态组件

通过 Vue 内置组件 <component> ,动态地绑定到它的 is 属性,依赖 is 值,来动态切换组件:

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component v-bind:is="currentView">
  <!-- 组件在 vm.currentview 变化时改变! -->
</component>

2.2.3、DOM 模版深入深入分析表明

当使用 DOM 作为模版时(比如,将 el 选项挂载到三个已存在的要素上), 你会蒙受 HTML 的部分范围,因为 Vue 唯有在浏览器深入解析和法则 HTML 后本事获得模版内容。极其像那么些要素 <ul> , <ol>, <table> , <select> 节制了能被它包裹的成分,<option> 只好出未来别的成分内部。

在自定义组件中接收那个受限定的成分时会招致部分主题材料,举个例子:

<table>
  <my-row>...</my-row>
</table>

自定义组件 <my-row> 被感到是不行的从头到尾的经过,因而在渲染的时候会产生错误。变通的方案是使用特别的 is 属性:

<table>
  <tr is="my-row"></tr>
</table>

有道是注意,借使您使用来源以下来源之生龙活虎的字符串模板,那几个约束将不适用:

  • <script type="text/x-template">
  • JavaScript内联模版字符串
  • .vue 组件

故而,有须要的话请使用字符串模版。

keep-live 缓存组件幸免重新渲染

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
<!-- 和 <transition> 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

<keep-alive> 是用在其三个直属的子组件被开关的景色。假让你在里面有 v-if 则不会做事。如若有上述的两个条件性的子元素,<keep-alive> 须要同不平时间唯有叁个子成分被渲染。

2.2.4、data 必得是函数

动用组件时,大相当多增选可以被盛传到 Vue 构造器中,有二个两样: data 必需是函数。 实际上,倘诺您如此做:

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

 

那么 Vue 会在调节台发出警告,告诉您在组件中 data 必需是一个函数。

澳门十三第娱乐官网平台 14

最佳通晓这种准则的留存意义。

<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>

var data = { counter: 0 }
Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // data 是一个函数,因此 Vue 不会警告,
  // 但是我们为每一个组件返回了同一个对象引用
  data: function () {
    return data
  }
})
new Vue({
  el: '#example-2'
})

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>组件</title>
    </head>

    <body>
        <div id="vm">
            <me-counter></me-counter>
            <me-counter></me-counter>
            <me-counter></me-counter>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //定义组件的数据
            var data = {
                "counter": 1
            };
            Vue.component("me-counter", {
                template: "<button type='button' @click='counter+=1'>{{counter}}</button>",
                data: function() {
                    return data;
                }
            });

            var vm = new Vue({
                el: "#vm",
                data: {
                    name: "rose"
                }
            });
        </script>
    </body>

</html>

结果:

澳门十三第娱乐官网平台 15

是因为那七个零构件分享了同叁个 data , 由此扩张二个 counter 会影响全体组件!大家能够通过为每一种组件再次来到新的 data 对象来解除这一个主题材料:

data: function () {
  return {
    counter: 0
  }
}

到现在每一个 counter 都有它自个儿内部的状态了

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>组件</title>
    </head>

    <body>
        <div id="vm">
            <me-counter></me-counter>
            <me-counter></me-counter>
            <me-counter></me-counter>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.component("me-counter", {
                template: "<button type='button' @click='counter+=1'>{{counter}}</button>",
                data: function() {
                    return {
                        "counter": 1
                    };
                }
            });

            var vm = new Vue({
                el: "#vm",
                data: {
                    name: "rose"
                }
            });
        </script>
    </body>

</html>

结果:

澳门十三第娱乐官网平台 16

子组件援引

动用 ref 为子组件钦定一个索引 ID。那样就足以是用父实例属性refs访谈子组。

父模板:

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>

var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile

2.2.5、构成组件

组件意味着合作专门的工作,平常老爹和儿子组件会是那样的涉及:组件 A 在它的沙盘模拟经营中应用了组件 B 。它们中间必然要求相互通讯:父组件要给子组件传递数据,子组件供给将它里面产生的事务告诉给父组件。但是,在一个喜爱得舍不得放手定义的接口中尽量将老爹和儿子组件解耦是很要紧的。那保险了每种组件能够在对峙隔离的意况中书写和透亮,也大幅度升高了组件的可维护性和可重用性。

在 Vue.js 中,父子组件的涉嫌能够总结为 props down, events up 。父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送音信。看看它们是怎么职业的。

澳门十三第娱乐官网平台 17

X-Template

另风华正茂种概念模版的艺术是在 JavaScript 标签里选择 text/x-template 类型,并且内定叁个 id。比方:

<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>

Vue.component('hello-world', {
  template: '#hello-world-template'
})

那在有超多模板或许小的选用中有用,否则应当幸免采纳,因为它将模版和零器件的任何概念隔开了。

2.3、Props

对低开销的静态组件使用 v-once

固然在 Vue 中渲染 HTML 比十分的快,不过当组件中饱含大量静态内容时,可以思谋选用 v-once
将渲染结果缓存起来,就疑似那样:

Vue.component('terms-of-service', {
template: '
<div v-once>
<h1>Terms of Service</h1>
... a lot of static content ...
</div>
'
})

2.3.1、使用Props传递数据

组件实例的成效域是孤立的。这代表不可能而且不该在子组件的沙盘模拟经营内一贯引用父组件的数量。能够利用 props 把数据传给子组件。

prop 是父组件用来传递数据的三个自定义属性。子组件须求显式地用 props 选项 声明 “prop”:

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样,prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '{{ message }}'
})

下一场向它传到叁个经常字符串:

<child message="hello!"></child>

结果:

hello!

本文由澳门网络娱乐游戏平台发布于Web前端,转载请注明出处:Vue 组件

相关阅读