vue 组件——注册组件的基本步骤
注册组件的基本步骤
1、创建组件构造器 调用Vue.extend()方法
2、注册组件 调用Vue.component()方法
3、使用组件 在Vue实例的作用范围内使用组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件基本步骤</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 3、使用组件-->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script>
//1、创建组件构造器对象
const myComponent = Vue.extend({
//ES6 Tab上方的按钮 ` `
template: `
<div>
<h2>标题</h2>
<p>我是</p>
<p>你好</p>
</div>`
});
//2、注册组件
//需要穿两个参数一个是注册组件的标签名(使用时的),一个是组件构造器(创建时的)
Vue.component('my-cpn',myComponent)
const app = new Vue({
el:'#app'
})
</script>
</body>
</html>
省略extend
<body>
<div id="app">
<!-- 使用组件-->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script>
Vue.component('my-cpn',{
//ES6 Tab上方的按钮 ` `
template: `
<div>
<h2>标题</h2>
<p>我是</p>
<p>你好</p>
</div>`
})
const app = new Vue({
el:'#app'
})
</script>
</body>
模板分离
<!-- wp:code -->
<pre class="wp-block-code"><code><body>
<div id="app">
<!-- 使用组件-->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<em><template id="cpn">
<div>
<h2>标题</h2>
<p>我是</p>
<p>你好</p>
</div>
</template></em>
<script>
Vue.component('my-cpn',{
<em> template: '#cpn'</em>
}
)
const app = new Vue({
el:'#app'
})
</script>
</body></code></pre>
<!-- /wp:code -->
全局组件和局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全局组件和局部组件</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 3、使用组件-->
<my-cpn></my-cpn>
<my-cpn></my-cpn>
</div>
<script>
//1、创建组件构造器对象
const myComponent = Vue.extend({
template: `
<div>
<h2>标题h2</h2>
<p>你好</p>
</div>`
});
//2、注册全局组件,可以在多个Vue实例下面使用
// Vue.component('my-cpn',myComponent)
const app = new Vue({
el:'#app',
data:{
message:'欢迎你!'
},
//2、局部组件,只能在当前的Vue实例下使用
components:{
'my-cpn':myComponent
}
})
</script>
</body>
</html>