5.组件初使用(5. Initial use of components)

1.简介

组件可以扩展 HTML 元素,封装可重用的代码。

组件可以扩展 HTML 元素,封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用.

组件系统让我们可以用独立可复用的小组件来构建大型应用.

2.创建局部组件

注册->配置->使用(只能在父组件中使用)

注册->配置->使用(只能在父组件中使用)

使用方法

1)注册:

var Child={
    template:'<h1>子组件</h1>'
}

2)配置组件名

 components:{
         'test':Child
        // 组件名:注册变量名
	} 

3)使用

<test></test>

例:

<div id="app">
   <runoob></runoob>
</div>

<script>
var Child = {
 template: '<h1>自定义组件!</h1>'
}

// 创建根实例
new Vue({
 el: '#app',
 components: {
   // <runoob> 将只在父模板可用
   'runoob': Child
 }
})
</script>

3.创建全局组件

语法: Vue.component(tagName, options);

  Vue.component(tagName, options);

使用方法:

1)注册

        Vue.component('all',{
                template:'<h1>全局组件</h1>'
                })

2)使用

<all></all>

4.Prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

1)props注册

			
            Vue.component('Proptest',{
                props:['message'],
                template:'<h1>{{message}}</h1>',
            })

2)使用

 1)静态message="Proptest"
   <Proptest message="Proptest"></Proptest>
 2)动态:message="Proptest"
  <Proptest :message="Proptest"></Proptest>

动态prop
类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件

动态prop
类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件

————————

1. Introduction

Components can extend HTML elements and encapsulate reusable code.

Components can extend HTML elements and encapsulate reusable code.

Component system allows us to build large applications with independent reusable small components

Component system allows us to build large applications with independent reusable small components

2. Create local components

Register – & gt; Configure – & gt; Use (only in parent components)

Register – & gt; Configure – & gt; Use (only in parent components)

usage method

1) Registration:

var Child={
    template:'<h1>子组件</h1>'
}

2) Configure component name

 components:{
         'test':Child
        // 组件名:注册变量名
	} 

3) Use

<test></test>

Example:

<div id="app">
   <runoob></runoob>
</div>

<script>
var Child = {
 template: '<h1>自定义组件!</h1>'
}

// 创建根实例
new Vue({
 el: '#app',
 components: {
   // <runoob> 将只在父模板可用
   'runoob': Child
 }
})
</script>

3. Create global components

语法: Vue.component(tagName, options);

  Vue.component(tagName, options);

usage method:

1) Register

        Vue.component('all',{
                template:'<h1>全局组件</h1>'
                })

2) Use

<all></all>

4.Prop

Prop is a custom attribute used by child components to accept data passed from parent components.

Prop is a custom attribute used by child components to accept data passed from parent components.

1)props注册

			
            Vue.component('Proptest',{
                props:['message'],
                template:'<h1>{{message}}</h1>',
            })

2) Use

 1)静态message="Proptest"
   <Proptest message="Proptest"></Proptest>
 2)动态:message="Proptest"
  <Proptest :message="Proptest"></Proptest>

Dynamic prop
Similar to binding HTML features to an expression with v-bind, you can also use v-bind to dynamically bind the value of props to the data of the parent component. Whenever the data of the parent component changes, the change will also be transmitted to the child component

Dynamic prop
Similar to binding HTML features to an expression with v-bind, you can also use v-bind to dynamically bind the value of props to the data of the parent component. Whenever the data of the parent component changes, the change will also be transmitted to the child component