vue中组件通信之父子通信:props(组件传参)

原创 2018年04月14日 23:10:45

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <alert msg="hhhhhhh"></alert>
</div>
<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

main.js:

Vue.component('alert', {
    template: '<button @click="on_click">点击</button>',
    props: ['msg'],
    methods: {
        on_click: function(){
            alert(this.msg);
        }
    }
})

new Vue({
    el: '#app'
})

或:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .blue_background{
            background:#0000FF;
        }
    </style>
</head>
<body>
<div id="app">
    <user username="samve"></user>
</div>
<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>


main.js:

Vue.component('user', {
    template: `
        <a :href="'user/' + username">{{username}}</a>
    `,
    props: ['username']
})

new Vue({
    el: '#app'
})

父子组件通信-props属性

父组件通过props向下传递数据给子组件; 组件实例的作用域是孤立的,子组件用props选项声明他期望得到的数据。 字面量语法:值是字符串,显示出来是1+1,如果想要传递number数值,在mes...
  • zx_p24
  • zx_p24
  • 2017-07-04 10:24:52
  • 492

vue如何实现父子组件通信,以及非父子组件通信(待看)

https://vuefe.cn/v2/guide/components.html# 非父子关系 var vm = new Vue({ el: '#list', ready: functio...
  • melody_day
  • melody_day
  • 2016-12-08 10:14:04
  • 2646

vue父子组件通信问题解决的思路之一

组件之间的作用域独立,而组件之间经常又需要传递数据。 A 为父组件,下面有子组件 B 和 C。 A 的数据可以通过 props 传递给 B 和 C。 A 可以通过 $broadcast ...
  • qq_34986769
  • qq_34986769
  • 2017-02-28 08:52:11
  • 2088

总结vue父子组件之间的通信

一 环境搭建 步骤 1 打开git,运行npm  install --global vue-cli 这是安装vue的命令行         2 vue init webpack vue-demo ...
  • Johnny0991
  • Johnny0991
  • 2017-11-15 11:03:10
  • 3640

vue.js父子组件通信动态绑定

  • hefeng6500
  • hefeng6500
  • 2017-07-08 15:12:11
  • 348

vue组件3-父子组件props传参

&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;...
  • qq_20353887
  • qq_20353887
  • 2017-07-11 11:19:16
  • 225

vue2.0父子组件以及非父子组件通信传参详解

1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: parent> child :child-msg="msg">/child>//这里必须要...
  • binginsist
  • binginsist
  • 2017-04-01 10:30:42
  • 11004

vue父子组件之间的通信

父子组件父子组件的关系:通常组件A在它的模板中使用组件B,此时组件A为父组件,组件B为子组件。父子组件应该解耦,组件实例的作用域是孤立的,子组件中不能直接使用父组件的数据。应该使用props传递父组件...
  • shuidinaozhongyan
  • shuidinaozhongyan
  • 2017-08-14 17:52:11
  • 239

Vuejs——(10)组件——父子组件通信

本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 本文...
  • qq20004604
  • qq20004604
  • 2016-09-05 17:08:44
  • 11652

Vue父子组件互相通信实例

组件实例之间的作用域是独立的,意味了不应该在子组件的模板内直接引用父组件的数据,但是父子组件之间需要通信:父组件要给子组件传递数据,子组件需要将它内部发生的事情告知给父组件。 prop 是父组件...
  • major_zhang
  • major_zhang
  • 2018-01-20 20:23:47
  • 281
收藏助手
不良信息举报
您举报文章:vue中组件通信之父子通信:props(组件传参)
举报原因:
原因补充:

(最多只允许输入30个字)