<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue test</title>
    <script src="static/js/vue.js"></script>
</head>

<body>
<div id="root">
    <div>
        <input v-model="note"/>
        <button v-on:click="myClick">提交</button>
    </div>
    <ul>
        <todo-item
                v-for="(item,index) of list"
                :key="index" :content="item">
        </todo-item>
    </ul>
</div>

<script>
    Vue.component('todo-item',{
        //接入一下名字叫 content 的外部属性
        props: ['content'],
        template: '<li @click="t1">{{content}}</li>',
        methods: {
            t1: function (){
                alert('你单击了：'+this.content)

            }
        }
    })
    new Vue({
        el: "#root",
        data: {
            note: '',
            list: []
        },
        methods: {
            myClick: function (){
                this.list.push(this.note)
                this.note=''
            }
        }
    })
</script>
</body>


</html>

运行效果，填写一个a 提交，点单击一下a看一下

hualinux 进阶 vue 1.13：todolist（三）组件与实例的关系_vue todolist

三、父子组件

在上面的例子中，我们创建一个最外层的实例，在这个实例里我们又创建了一个小的全局todo-item小组件。

在外部包含在内部组件的情况下，外部的叫父组件，里面的小组件我们称为子组件。

3.1 父向子传值

在Vue之中，父组件向子组件传值是通过属性的形式进行的，主要是prop，在vue实例中使用 props 关键词。这样就可以变成此组件的一个属性了。

3.1.1 使用props选项传值

使用v-bind命令“:”，这样可以把父组件的数据传给它。上面例子也有说明了。

子组件的props选项能够接收来自父组件数据。没错，仅仅只能接收，props是单向绑定的，即只能父组件向子组件传递，不能反向。分静态和动态

3.1.2 使用$ref

可以见vue导读的$ref

如果ref用在子组件上，指向的是组件实例，可以理解为对子组件的索引，通过$ref可能获取到在子组件里定义的属性和方法。
如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。

这里再补充一点就是，prop和$ref之间的区别：
prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。

例子我这里就不说了，可以看"vue $ref的基本用法"