<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<script src="../JS/vue.js"></script>

<body>

<!--父亲组件-->

<div id="app">

<cpn v-bind:arg1="messagqe" :arg2="movies"></cpn>

</div>

<!--父亲组件-->

<!--组件-->

<template id="cpn">

<div >

<!--    上面的div一定要加的一定要有个父级元素才能显示-->

{{arg1}}

{{arg2}}

 <ul>

     <li v-for="item in arg2">{{item}}</li>

 </ul>

</div>

</template>

<!--组件-->

<script>

    //父传子使用props

    const cpn={

        template:"#cpn",

      //第一种  props:["arg1","arg2"],

     //第二种   props:{arg1:String,arg2:Array},

        props:{

            arg1:{type:String,default:"默认值1",required:true},//true是需要参数

            arg2:{type:Object,default:"默认值2",required:true}

        },

        data()//必须以函数xingshi

        {

         return{};

        }

    }

    const app =new Vue({

        el:"#app", //挂载那个元素

        data:{ messagqe:"胡鸡鸡", movies:["qq","www","aiai","saosao"]},

        components:{

            cpn

        }

    })

</script>

</body>

</html>

　　直接上函数不逼逼

vue 父组件向子组件传参（笔记）的更多相关文章

  1. Layui父页面向子页面传参

    废话不多说!直接上代码! 父窗体js $('.mytable').on('click', '.editRow', function () { var table = $('#table_id_exam ...

  2. 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作

    父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  3. vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件

    Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...

  4. Vue 父组件向子组件传值，传方法，传父组件整体

    父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3 ...

  5. vue父组件为子组件传值传不过去？vue为数组传值，不能直接用等于的方式，要用循环加push的方式

    父组件为子组件传值不成功,子组件拿不到值,不能直接赋值,要用循环加push的方式赋值.

  6. vue组件之子组件和父组件

    在看官网和学习的过程中,有些不明确子组件和父组件的定义,为了方便后期学习和理解去网站上搜索了一下相关的解释 1.使用的地方是父组件,定义的地方是子组件,虽然他们是同一个组件 2.Vue.compone ...

  7. vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值

      一.父组件调用子组件方法 父组件代码  parent.vue <template> <div> <button @click="parentFun" ...

  8. vue,一路走来（12）--父与子之间传参

    今天想起一直没有记录父组件与子组件的传参问题,这在项目中一直用到. 父向子组件传参 Index.vue父组件中 <component-a :msgfromfa="(positionno ...

  9. vue之provide和inject跨组件传递属性值失败（父组件向子组件传值的两种方式）

    简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...

  10. vue单文件组件形成父子（子父）组件之间通信（vue父组件传递数据给子组件，子组件传递数据给父组件）

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

随机推荐

  1. c++ 读取、输出txt文件

    下面这段话转自:https://blog.csdn.net/lightlater/article/details/6326338 关于文本文件的文件头 第一 ANSI文件的文件头为空,不需要处理: 第 ...

  2. TP-LINK路由器端口映射全套教程(亲测有效)

    最近想在自己的笔记本上搭建一个博客系统,方便自己写写日志,记录一些知识心得. 由于笔记本是长期放在家里的,需要在外边也能访问它,于是需要在路由器上设置一个端口映射,让在因特网上的其他电脑能访问到家里的 ...

  3. python字典操作方法详解

    前言 字典是一种通过名字或者关键字引用的得数据结构,key 类型需要时被哈希,其键可以是数字.字符串.元组,这种结构类型也称之为映射.字典类型是Python中唯一內建的映射类型. 注意,浮点数比较很不 ...

  4. java集合体系结构总结

    好,首先我们根据这张集合体系图来慢慢分析.大到顶层接口,小到具体实现类. 首先,我想说为什么要用集合?简单的说:数组长度固定,且是同种数据类型.不能满足需求.所以我们引入集合(容器)来存储任意数据类型 ...

  5. Vue系列(六)之常用指令v-model

    v-model 基本使用 修饰符 .trim .number .lazy 前面讲到的插值,其实都是单向绑定,数据变-->视图变.有些元素可以与用户交互,比如input,select等,那么我们希 ...

  6. 多项式输出 (0)<P2009_1>

    多项式输出 (poly.pas/c/cpp) [问题描述] 一元n次多项式可用如下的表达式表示: 其中,称为i次项,ai称为i次项的系数.给出一个一元多项式各项的次数和系数,请按照如下规定的格式要求输 ...

  7. Omnisharp VsCode Attaching to remote processes

    原文链接: https://github.com/OmniSharp/omnisharp-vscode/wiki/Attaching-to-remote-processes The C# extens ...

  8. 登陆页面的Sql注入

    自己手工注入的知识比较薄弱,这里就记录一下注入过程 题目: .登陆页面,使用sql万能密码可以登陆账号,但是flag不会自己跳出来,出题人是想让我们手工注入 常用万能密码: 'or'='or' adm ...

  9. nginx的access的阶段的access模块、auth_basic模块、auth_request模块及satisfy指令介绍

    access 模块 示例从上向下匹配 location / { deny 192.168.1.1; allow 192.168.1.0/24; allow 10.1.1.0/16; allow 200 ...

  10. 3 JavaScript正则表达式

    正则表达式:Regular(有规则的) Expression 正则表达式是由一个字符序列形成的搜索模式,可用于文本搜索和文本替换 常见于字符串的search和replace方法 var str = & ...