父组件向子组件里传参,props的使用实例

例子一

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>vue</title>

	<link rel="stylesheet" href="">

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<!-- <script type="text/javascript" src="../js/vue.js"></script> -->

</head>

<body>

<div id="hdcms">

	<!--hd="abc"传递字符串 :show-title:加上冒号传递的就是一个变量了(注意驼峰命名和-号命名的写法) -->

	<hd-news hd="abc" css="testcss" :list="news" :show-title="showTitle"></hd-news> <!--引入模板 和new Vue()里的components里注册时的名字 hdNews 要一致-->

</div>

<script type="text/x-template" id="hdNewstemplate">

	<div>

		<span>{{hd}}</span>

		<span>{{css}}</span>

		<li v-for="(v,k) in list">

			{{v.title}}

			<button v-if="v.show" @click="list.splice(k,1)">删除</button>

			<input v-model="v.show" type="checkbox">显示删除按钮

			<button v-if="!v.show" @click="v.show?v.show=false:v.show=true">显示删除按钮</button>

		</li>

		{{showTitle}}

	</div>

</script>

<script>

    var hdNews={

        //绑定id="hdNews" 的 x-template模板

        template:'#hdNewstemplate',

        data(){

            return {}

        },

		//用于接收父组件里传过来的数据,注意驼峰命名和-号命名的写法

		props:['hd','css','list','showTitle'],

        methods:{}

    };

    new Vue({

        el:'#hdcms',

        //绑定组件hdNews  hdNews:hdNews简写成hdNews

        components:{hdNews},

        data:{

            news:[

                {id:0,title:'tpshop',num:1,show:false},

                {id:1,title:'hdcms',num:1,show:false}

            ],

            showTitle:'hello vue.',

		},

    });

</script>

</body>

</html>

效果:

例子二:

<!DOCTYPE html>

<html lang=”zh-cn”>

<head>

    <meta charset=”UTF-8″>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <meta http-equiv=”X-UA-Compatible” content=”ie=edge”>

    <title>Document</title>

</head>

<script type=”x-template” id=”father”>

    <div>

        <h2 style=”color:blue”>{{hello}}</h2>

            {{apptoshuaiqm}}

        <childer :shuai-qmtochilder=”shuaiQmGiveMe” />

    </div>

</script>

<script type=”x-template” id=”childer”>

    <div>

        <h2 style=”color:blue”>{{hello}}</h2>

        {{shuaiQmtochilder}}

    </div>

</script>

<body>

    <div id=”app”>

        <shuai-qm apptoshuaiqm=”我是app传过来的值”></shuai-qm>

    </div>

    <script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

    <script>

        var childer = {

            props: ['shuaiQmtochilder'],

            data() {

                return {

                    hello: 'hello i’m dawangraoming',

                }

            },

            template: '#childer'

        }

        var father = {

            props: ['apptoshuaiqm'],// 这里大家一定要注意，请完全使用小写传参

            data() {

                return {

                    hello: 'hello world',

                    shuaiQmGiveMe: '我是从shuaiQm传过来的值'

                }

            },

            template: '#father',

            components: {

                'childer': childer

            }

        }

        var app = new Vue({

            el: '#app',

            data: {

                message: 'Hello World',

                isTrue: true,

            },

            components: {

                'shuaiQm': father,

            }

        })

    </script>

</body>

</html>

40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作的更多相关文章

  1. 040——VUE中组件之组件间的数据参props的使用实例操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 在WePY中实现了小程序的组件化开发，组件的所有业务与功能在组件本身实现，组件与组件之间彼此隔离，上述例子在WePY的组件化开发过程中，A组件只会影响到A所绑定的myclick

    wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=%e5%be%ae%e4%bf%a1%e5%b0%8f%e7 ...

  3. vue.js+koa2项目实战（五）axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  4. 【前端vue开发】vue子调父 $emit (把子组件的数据传给父组件)

    ps:App.vue 父组件 Hello.vue 子组件 <!--App.vue :--> <template> <div id="app"> ...

  5. vue中父级与子组件生命周期的先后顺序

    1.vue的生命周期 2.views/createrCustormer.vue为父级     <template>     <expressService />   </ ...

  6. vue---子调父 $emit (把子组件的数据传给父组件)

    ps:App.vue 父组件  Hello.vue 子组件 ps:App.vue 父组件 Hello.vue 子组件 <!--App.vue :--> <template> & ...

  7. vue 项目， 通知子组件更新，父组件中每次点击按钮重新加载子组件，（重新生成dom 元素）

    vue是组件化开发的项目,很多情况下会把公共组件提取出来,来减少代码量,提高开发效率,和以后更好的可维护性.很多情况下,父组件中都会引用子组件这种情况.通过给在父组件中引用的子组件标签上添加属性,来渲 ...

  8. vue 路由传参中刷新页面参数丢失 及传参的几种方式？

    在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...

  9. Vue 组件&组件之间的通信 之 template模板引用与动态组件的使用

    template模板引用 在component的template中书写大量的HTML元素很麻烦. Vue提供了<template>标签,可以在里边书写HTML,然后通过ID指定到组建内的t ...

随机推荐

  1. 网页设计，Access入门 2010，数学

    网页设计(表格) 创建表格:插入---表格---设置表格大小---确定.(按Ctrl键可多选单元格) 插入图片在表格:光标在单元格---插入---图像---选择图像---确定. 表格属性:属性(屏幕下 ...

  2. [转]Linq语法一

    LINQ即语言集成查询,是.NET Framework 3.5中新增的功能.其功能类似于数据库中的SQL语句(实际上LINQ就是针对.NET Framework的SQL):提供标准的.易于学习的查询和 ...

  3. C#设计模式--抽象工厂模式(创建型模式)

    一.抽象工厂模式: 在工厂模式中具体的产品和具体的工厂是一一对应的,一个工厂只能生产一种产品,结构单一,例如小米公司刚开始是只生产小米手机,但是伴随着公司的发展,他们需要生产不同型号的手机,也会生产路 ...

  4. [topcoder]TheGridDivTwo

    http://community.topcoder.com/stat?c=problem_statement&pm=13628&rd=16278 标程是BFS,我用DFS,都可解. 这 ...

  5. K星异客

    http://baike.baidu.com/view/222058.htm 这部改编自基恩·布汝尔1995年出版的同名小说的电影在当年的十月档票房榜上称冠.本来这部电影的外星人主人公属意于威尔.史密 ...

  6. Windows服务程序时钟调用

    1       大概思路 设计服务程序 创建服务 安装必备组件 编写Service1 运行效果 2       设计服务程序 创建服务程序,通过添加System.Timers时钟进行定时向Wecome ...

  7. Selenium入门13 cookie的增删改查

    cookie的增删改查: 查询:get_cookies()查询所有cookie,get_cookie(cookie的name)获取单个cookie 删除:delete_cookie(cookie的na ...

  8. nutzwk运行后wk-web中生成ehcache.disk.store.dir有什么用,怎么去掉

    nutzwk运行后wk-web中生成ehcache.disk.store.dir有什么用,怎么去掉  发布于 29天前  作者 qq_96c46988  64 次浏览  复制  上一个帖子  下一个帖 ...

  9. cocos2d-x推断sprite点击

    我们经常须要推断用户的点击操作是否落于某个sprite之上,进而让这个sprite做出响应. 可是假设我们通过继承CCSprite类来实现自己的Sprite类的时候,产生的视图尺寸会充满屏幕.多个Sp ...

  10. 温故而知新：Asp.Net中如何正确使用Session

    原文链接作者:菩提树下的杨过出处:http://yjmyzz.cnblogs.com Asp.Net中的Session要比Asp中的Session灵活和强大很多,同时也复杂很多:看到有一些Asp.Ne ...