vue-父子组件嵌套的示例

Posted 赵小生的技术博客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue-父子组件嵌套的示例相关的知识，希望对你有一定的参考价值。

组件注册：

// 注册组件
Vue.component(‘my-component‘, {
  template: ‘<div>A custom component!</div>‘
})

注册局部组件

var childComponent = Vue.extend({
        template: ‘<p>this is child template</p>‘
    });
Vue.component("parent",{
        template: ‘<div><p>this is parent template</p><child></child></div>‘,
        components: {
            ‘child‘: childComponent,//child只能在父组件里使用
        }
    });

完整的html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<title>vue-demo</title>
</head>
<body>
<h1>vue父子组件嵌套示例</h1>
<div id=‘app‘>
  <my-component></my-component>
  <parent></parent>
</div>
</body>
<script>
// 注册组件
Vue.component(‘my-component‘, {
  template: ‘<div>A custom component!</div>‘
})
// 子组件
var childComponent = Vue.extend({
        template: ‘<p>this is child template</p>‘
    });
// 父组件
Vue.component("parent",{
        template: ‘<div><p>this is parent template</p><child></child></div>‘,
        components: {
            ‘child‘: childComponent,
        }
    });
new Vue({
  el: ‘#app‘,
  data: {
      }
})

</script>
</html>

注意，组件只能有一个根元素，所以最好使用一个div元素包裹组件模板，否则会提示错误：Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

以下是错误的： 

Vue.component("parent",{
        template: ‘<div><p>this is parent template</p></div><child></child>‘,//组件有多个根元素
        components: {
            ‘child‘: childComponent,
        }
    });

也可以使用非字符串模板注册组件，如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<title>vue-demo</title>
</head>
<body>
    <h1>vue父子组件嵌套示例</h1>
<template id="child">
    <p>this is child template</p>
</template>
<template id="parent">
    <div>
        <p>this is parent template</p>
        <child></child>
    </div>
</template>
<div id="app">
    <parent></parent>
</div>
<script src="vue.js"></script>
<script>
    var childComponent = Vue.extend({
        template: ‘#child‘
    });
    Vue.component("parent",{
        template: ‘#parent‘,
        components: {
            ‘child‘: childComponent,
        }
    });
    var app = new Vue({
        el: ‘#app‘
    });
</script>
</body>
</html>

效果是一样的。

（完）

以上是关于vue-父子组件嵌套的示例的主要内容，如果未能解决你的问题，请参考以下文章

Vue-Cli—04.父子组件传值祖孙组件传值兄弟组件传值

使用Vue父子组件通信实现todolist的功能示例代码

vue嵌套路由（父子路由）

vue父子组件

vue中父子传值

Vue中的Bus（总线）实现非父子组件通信