vue之组件通信方式(父子组件)

//昨天是回顾了组件,但是组件之间是相互独立的,这时就需要使用通信方式实现数据传递

  组件之间的关系有兄弟/父子/隔代关系(今天回顾一下父子之间的通信方式)

一、父子之间的通信

//父子之间通信可分为两种(父 => 子/子 => 父)

• 父 => 子(props方法)

//html布局
    <div id="app"> 
        <father></father>
    </div>
    
    <template id="father">
        <div>
            <p>这是father组件！---> {
  {pMsg}}</p>
            <son :p-msg="pMsg"></son>
        </div>
    </template>
    
//js代码
    Vue.component("father",{
        template:"#father",
        data:function(){
            return {
                pMsg:"hello father"
            }
        },
        components:{
            son:{
                template:"<div>这是son子组件... {
  {pMsg}}</div>",
                props:["pMsg"] //接受父组件传递来的属性
            }