第四节：Vue表单标签和组件的基本用法，父子组件间的通信

vue表单标签和组件的基本用法，父子组件间的通信，直接看例子吧。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <span>Welcome {{name}} join our home</span><br>
        <input type="text" v-model="name" placeholder="shannonliang" />
        <input type="checkbox" id="checkbox" v-model="checked" />
        <label for="checkbox">{{checked}}</label>
        <br>
        <span>交通工具：</span>
        <br>
        <!--:biz是向子组件传值绑定到了biz上,也可以用v-bind:biz,  "biz" 是传的值，即取的是for循环中的biz的值  -->
        <!--refreshbizlines 是自定义的一个事件类型（这个区分大小写），类似click，直接绑定到了组件上。rebizLines是触发该类型执行的自定义的方法-->
        <biz-component v-for="biz in bizs" :biz="biz" v-on:refreshbizlines="rebizLines"> </biz-component>
        <br>
        <span>{{bizLines}}</span>
        <br>

    </div>
</body>
<script type="text/javascript">
    var child = '<span><input type="checkbox" :id="biz.type" @click="addBizLines" /><label :for="biz.type">{{biz.description}}</label></span>';
    Vue.component('biz-component', { //组件的名称也区分大小写；这里注册的时候大写，html标签中就用‘-’，例如  注册：bizComponent，HTML： <biz-component>。否则就都用小写。
        // 声明 props
        props: ["biz"], //接受父组件的传值，
        // 就像 data 一样，prop 可以用在模板内
        template: child,
        methods: {
            addBizLines: function(e) { //方法名称不区分大小写
                if (e.target.checked)
                    this.$emit('refreshbizlines', e.target.id, true); //触发父组件中的自定义事件类型(refreshbizlines)绑定的方法，会调用rebizLines方法.后面传的是两个参数。
                else {
                    this.$emit('refreshbizlines', e.target.id, false);
                }
            }
        }
    });
    var app = new Vue({
        el: "#app",
        data: {
            name: "shnannon",
            checked: false,
            bizs: [{
                type: "flash",
                description: "快车"
            }, {
                type: "premium",
                description: "专车"
            }, {
                type: "bus",
                description: "巴士"
            }],
            bizLines: []
        },
        methods: {
            rebizLines: function(value, isAdd) {
                if (isAdd)
                    this.$data.bizLines.push(value);
                else {
                    this.$data.bizLines.splice(this.$data.bizLines.indexOf(value), 1); //splice(i,n,v);i表示删除的数组中开始的位置的索引(包括)，n删除的数组中的个数，v插入数组的值
                }
            }
        }
    });
</script>

</html>

2、注意

biz是向子组件传值绑定到了biz上,也可以用v-bind:biz,  "biz" 是传的值，即取的是for循环中的biz的值

refreshbizlines 是自定义的一个事件类型（这个区分大小写），类似click，直接绑定到了组件上。rebizLines是触发该类型执行的自定义的方法

/组件的名称也区分大小写；这里注册的时候大写，html标签中就用‘-’，例如  注册：bizComponent，HTML： <biz-component>。否则就都用小写

第四节：Vue表单标签和组件的基本用法，父子组件间的通信的更多相关文章

第五节：表单标签的用法——value绑定和修饰符
1.表单标签的用法--value绑定和修饰符 value绑定的写法:v-bind:value 或者简写 :value 修饰符: lazy , Number , trim . 用法如: v-model ...
web（四）html表单类标签
表单类标签操作者用于输入信息,并将信息提交给服务器的标签集合. 表单标签介绍 form标签:表单元素(其余标签)标签的容器标签 input标签:用于用户信息输入的标签. button标签:按钮标签. ...
第七节认识SpringMVC中的表单标签
所谓成熟,就是:你要习惯,任何人的忽冷忽热:也要看淡,任何人的渐行渐远: --胖先生 SpringMVC的表单标签回顾: JSTL标签 --C标签 FMT标签自学:JSP如何自定义标签[开源社区当 ...
22----2013&period;06&period;29---HTML--html介绍&period;超链接和图片,表格,表单,表单标签,meta,复习当天内容
01 HTML HTML :Hypertext Markup Language 超文本标记语言(类似于裸奔的人.) 作用:向用户展示信息. CSS: Cascading 层叠样式表(类似于人的 ...
springMVC(7)---表单标签
springMVC(7)---表单标签 form标签作用简单来讲form表单有两大作用 1:第一就是往后端提交数据或者前端回显 ...
5&period;22 HTML 列表标签和表单标签
1,ul无序列表标签 ul:unordered list ,就是无序列表的意思. li: listitem 列表项的意思.无序列表的每一项都是<li>. <!DOCTYPE h ...
python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
struts2：表单标签
目录表单标签1. form标签2. submit标签3. checkbox标签4. checkboxlist标签5. combobox标签6. doubleselect标签7. head标签8. f ...
day 31 表单标签，CSS
一. HTML表单标签 HTML表单用于搜集不同类型的用户输入,然后把数据提交给服务器处理. 常用的表单标签: 标签作用 form 所有表单标签的根标签 input 输入标签,包括单行输入框.密码框 ...

随机推荐

阅读{django-restframework}源码[generics&period;py]学习笔记
首先django-restframework是基于django的一个框架. mixins.py中开头是这样写的: Basic building blocks for generic class b ...
Redis 队列操作
class Program { //版本2:使用Redis的客户端管理器(对象池) public static IRedisClientsManager redisClientManager = ne ...
final &period;&period;&period;&period;&period;finally &period;&period;&period;&period;&period;&period; 和Finalize &period;&period;&period;&period;&period;&period;区别
一.性质不同 ()final为关键字: ()finalize()为方法: ()finally为为区块标志,用于try语句中: 二.作用 ()final为用于标识常量的关键字,final标识的关键字存储 ...
顺序栈的c++实现及利用其实现括号的匹配
#include<iostream>#include<cassert>#include<cstring>#include<string>using na ...
MVC架构剖析--ASP&period;NET MVC图解（二）
问题-Delphi不能进行调试模式
问题现象:delphi不能进行调试模式问题原因:可能是防火墙的原因,我有一次在电脑清理时,把delphi的调试程序名放在了360的黑名单中,按F9后,无法调试. 问题处理:你懂的(要不白名单,要不你 ...
error&colon; File not found by glob&quest;&quest;&quest;
引发上述问题的几种情形: 1.rpm包的包名中含有“[.]”这类特殊符号; 2.执行rpm -ivh xxxx.rpm时,xxxx包名不存在; 3.rpm包顶层的目录名不存在或者存在问题: - ...
hdu 4034 Graph（逆向floyd）
floyd的松弛部分是 g[i][j] = min(g[i][j], g[i][k] + g[k][j]);也就是说,g[i][j] <= g[i][k] + g[k][j] (存在i-> ...
基于MVC和Bootstrap的权限框架解决方案一．搭建HTML
因为某些原因,因为需要,最新要做一套客户管理系统,但是不满足于仅有的框架. 看了很多大牛写的框架,强大是强大,代码也太TM多了,乱七八糟话不多说,开始吧随便在网上找到一套好看的HTML,看起来还不错 ...
双机热备ROSE HA工作原理
双机热备ROSE HA工作原理当双机热备软件启动后,ROSE HA首先启动HA Manager管理程序,根据高可靠性系统的配置结构初始化,然后启动必要的服务和代理程序来监控和管理系统服务.HA代理程 ...