Vue学习系列(十六):Vue的组件

文章目录

    • 全局组件
    • 局部组件
    • 父子组件通信

Vue学习系列:
上一篇:Vue学习系列(十五):Vue的表单

全局组件

我们可以使用Vue.component(tagName, options)语法注册一个全局组件,在该页面内,全局组件可以被多个Vue实例共享使用。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="../../js/vue.js">script>
head>
<body>
<div id="app">
    <my-component>my-component>
div>
<div id="otherApp">
    <my-component>my-component>
div>

body>
<script>
    Vue.component('my-component', {
        template: '

自定义组件!

'
}); const app = new Vue({ el: '#app', }); const otherApp = new Vue({ el: '#otherApp', });
script> html>

局部组件

可以使用Vue中的components属性注册局部组件,该组件只能在该Vue实例中使用。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="../../js/vue.js">script>
head>
<body>
<div id="app">
    <my-component>my-component>
div>
<div id="otherApp">
    <my-component>my-component>
div>
body>
<script>
    const app = new Vue({
        el: '#app',
        components: {
            'my-component': {
                template: '

自定义组件!

'
} } }); const otherApp = new Vue({ el: '#otherApp', });
script> html>

父子组件通信


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="../../js/vue.js">script>
head>
<body>
<div id="app">
    <input v-model="inputText">
    <my-component :message="inputText">my-component>
div>
body>
<script>
    Vue.component('my-component',{
        props: ['message'],
        template: '

{{message}}

'
}) const app = new Vue({ el: '#app', data: { inputText: '', }, });
script> html>

【注意】:prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。

你可能感兴趣的:(前端)