Vue 父组件与子组件

为了搞清楚父组件与子组件,下面我们先来搞清楚组件的创建与注册的图示过程:

Vue 父组件与子组件_第1张图片

看完过程后我们再来看看菜鸟教程中的vue组件实例,实例越简单越好,这是菜鸟教程中的全局组件实例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="javascript/vue.min.js">script>
head>
<body>
    <div id="app">
        <runoob>runoob>
    div>
    <script>
        //第一种定义方式
        Vue.component('runoob',{
            template:'

自定义组件

'
}) new Vue({ el:'#app' }) //第二种定义方式 /* var component=Vue.extend({ template:'

自定义子组件

' }) Vue.component('runoob',component); new Vue({ el:'#app' })*/
script> body> html>

显示结果:
Vue 父组件与子组件_第2张图片

结合上面两种定义方法,在此我顺便说一下Vue.extend与Vue.component之间的区别:

Vue.extend只是创建组件的一个构造器,你给它参数 他给你一个组件。然后作用到Vue.component 这个全局注册方法里,就如上面代码实例。

下面我们再结合上面的全局组件实例代码,来讲讲父组件与子组件。要明白这两个概念,首先要明白这二者之间的关系,我想关于父子关系在此我不用多说。结合上面代码的第一种方法来讲讲:

Vue 父组件与子组件_第3张图片

runoob与标签h1就是父组件与子组件之间的关系。

http://www.cnblogs.com/keepfool/p/5625583.html#top

你可能感兴趣的:(vue.js)