vue 父组件向子组件传参（笔记）
<!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 父组件向子组件传参（笔记）的更多相关文章
- Layui父页面向子页面传参
废话不多说!直接上代码! 父窗体js $('.mytable').on('click', '.editRow', function () { var table = $('#table_id_exam ...
- 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作
父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件
Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...
- Vue 父组件向子组件传值，传方法，传父组件整体
父子组件传值 1.父组件调用子组件时绑定属性,例如-> :title="title" 2.子组件中在props中声明title:props:['title','msg'] 3 ...
- vue父组件为子组件传值传不过去？vue为数组传值，不能直接用等于的方式，要用循环加push的方式
父组件为子组件传值不成功,子组件拿不到值,不能直接赋值,要用循环加push的方式赋值.
- vue组件之子组件和父组件
在看官网和学习的过程中,有些不明确子组件和父组件的定义,为了方便后期学习和理解去网站上搜索了一下相关的解释 1.使用的地方是父组件,定义的地方是子组件,虽然他们是同一个组件 2.Vue.compone ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- vue,一路走来（12）--父与子之间传参
今天想起一直没有记录父组件与子组件的传参问题,这在项目中一直用到. 父向子组件传参 Index.vue父组件中 <component-a :msgfromfa="(positionno ...
- vue之provide和inject跨组件传递属性值失败（父组件向子组件传值的两种方式）
简单介绍:当一个子组件需要用到父组件的父组件的某些参数.那么这个时候为了避免组件重复传参,使用vue的依赖注入是个不错的方法,直接在最外层组件设置一个provide,内部不管多少嵌套都可以直接取到最外 ...
- vue单文件组件形成父子（子父）组件之间通信（vue父组件传递数据给子组件，子组件传递数据给父组件）
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
随机推荐
- Cisco AP-如何调整LAP信道
GUI方法: CLI的方法:根据对应的接口去调整信道,信道带宽,传输功率等信息吧.(Cisco Controller) >config slot 0 antenna Configures the ...
- PhpStorm For Mac 安装使用及 Php 开发的 ‘Hello World’
PHP全称为:Hypertext Preprocessor,中文名为:『超文本预处理 器』是一种通用开源脚本语言,主要用于Web应用开发(俗称做网站或 者做后台!) 编译软件:PHPStorm for ...
- request库解析中文
官网地址: http://cn.python-requests.org/zh_CN/latest/ 高级用法 本篇文档涵盖了 Requests 的一些高级特性. 会话对象 会话对象让你能够跨请求保持某 ...
- vagrant up启动centos7时出现"rsync" could not be found on your PATH. Make sure that rsyncis properly ins
(1)问题1:"rsync" could not be found on your PATH. Make sure that rsyncis properly ins 解决方法: ...
- 实现纸牌游戏的随机抽牌洗牌过程（item系列几个内置方法的实例）
实现纸牌游戏的随机抽牌洗牌过程(item系列几个内置方法的实例) 1.namedtuple:命名元组,可以创建一个没有方法只有属性的类 from collections import namedtup ...
- CSV文件自动化（自定义参数）
说明: CSV 文件:cmd_list1.csv testcase:对应test case id function:对应test case的标题 interfacenotes:对应bsp节点名称 cm ...
- VUE学习笔记二
package.json不可以写注释!!!!!!!!!!初始化:npm init -y 有时候使用 npm i node-sass -D 装不上,这时候,就必须使用 cnpm i node-sass ...
- 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 ...
- 区分 for...in 和 for...of
我们都知道在 JavaScript 中 for...in 和 for...of 都可以迭代一个数组,但他们之间也有着很大的区别: 区别一:用于迭代器的返回值不同 for...in 和 for...of ...
- Java--对象与类（二）
final 实例域 可以将实例域定义为final.构建对象时必须初始化这样的域.也就是说在一个构造器执行之后,这个域被设置,并且之后无法对其修改 final 修饰符大多应用于基本(primitive) ...