23_父传子_组件间通信（props）

作者: CHENPEIHUANG | 来源:发表于2018-02-10 05:01 被阅读0次

23_父传子_组件间通信（props）
vue通信方式
Vue 笔记
【Vue】组件通信（任意通信）
【Vue】组件 - 验证props
组件二
Vue 父子组件和兄弟组件通信
通讯方式
【Vue】组件通信（子传父 $emit）
Vue组件间通信,与服务器端通信

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <my-component :msg="msg"></my-component>
        </div>
        <script src="js/vue.js"></script>
        <script>
            Vue.component('my-component',{
                template:"<div><p>{{msg}}</p></div>",
                //父组件的数据传递给子组件时，通过props属性传递
                //props的写法：
                //第一种
                props:['msg']   //用对应的变量名接受对应的自定义属性的值
                //第二种
//              props:{
//                  msg:{
//                      //配置接收的数据类型、验证
//                      type:[String,Number]
//                      required:true
//                  }
//              }
            });
            
            var vm = new Vue({
                el:"#app",
                data:{
                    msg:"hello"
                }
                
            })
        </script>
    </body>
</html>