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

最新推荐文章于 2022-01-10 17:37:44 发布

hualinux

最新推荐文章于 2022-01-10 17:37:44 发布

阅读量131

点赞数

分类专栏：进阶篇3 vue.js专业前端入门文章标签： hualinux vue vue 组件与实例的关系 todolist组件与实例 vue todolist

本文链接：https://blog.csdn.net/hualinux/article/details/115467385

版权

进阶篇3 vue.js专业前端入门专栏收录该内容

32 篇文章 4 订阅

订阅专栏

一、组件与实例的关系

每一个Vue的组件都是vue的实例。

任何一个Vue项目都是有千千万万的Vue实例组成的。

二、例子

怎样判断是一个vue实例，可以把前章的例子修改一下，添加一些方法和事件

<!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看一下

三、父子组件

在上面的例子中，我们创建一个最外层的实例，在这个实例里我们又创建了一个小的全局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的基本用法"

3.2 子向父传值$emit

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

例子将在下章数据删除功能实现讲解。

hualinux

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hualinux 进阶 vue 1.13：todolist（三）组件与实例的关系

一、组件与实例的关系每一个Vue的组件都是vue的实例。任何一个Vue项目都是有千千万万的Vue实例组成的。二、例子怎样判断是一个vue实例，可以把前章的例子修改一下，添加一些方法和事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue test</title> <script src.
复制链接

扫一扫

专栏目录