vue组件的使用

1.什么是组件

　　组件（Component）是 Vue.js 最强大的功能之一。

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

　　组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

　　注册一个全局组件语法格式如下：

　　Vue.component(tagName, options)

 

　　tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

　　<tagName></tagName>

2.全局组件

所有实例都能用全局组件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <runoob></runoob>
</div>

<script>
// 注册
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>
</body>
</html>

3.局部组件

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <runoob></runoob>
</div>

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

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

4.Prop

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

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：

<body>
<div id="app">
    <child message="hello!"></child>
</div>

<script>
// 注册
Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>
</body>

 

以上内容为个人学习总结，欢迎批评指正~~~

posted @ 2021-08-19 19:22  理想三旬·  阅读(240)  评论(0)    收藏  举报