vue初学-day10

04-(掌握)父访问子-children-refs P67 - 17:04

1、$children

<div id="app">
   <cpn></cpn>
   <cpn></cpn>
   <cpn></cpn>
  <!--点击父组件-->
  <button @click="btnClick">按钮</button>
</div>

<template id="cpn">
  <div>
    <h2>我是子组件</h2>
  </div>
</template>
<!--使用vue-->
<script src="../js/vue.js"></script>
<script>
  // <!--子组件注册-->
    let cpn={
      template:"#cpn",
      methods:{
        showMessage(){
          console.log("showMessage")
        }
      },
      data(){
        return{
          name:"我是子组件的name"
        }
      }
    };

    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊"
      },
      methods:{
        btnClick(){
            console.log(this.$children)
            this.$children[0].showMessage();
            for(let c of this.$children){
              console.log(c.name)
              console.log(c.showMessage())
            }
            // console.log(this.$children[0].name)
        }
      },
      components:{
        cpn
      }
    })
</script>

2、$refs

<div id="app">
    <cpn ref="aa"></cpn>
  <button @click="btnClick">按钮</button>
</div>
<template id="cpn">
  <div>我是子组件</div>
</template>
<!--使用vue-->
<script src="../js/vue.js"></script>
<script>
    let cpn ={
      template:"#cpn",
      data(){
        return{
          name:"我是子组件的name"
        }
      },

    };

    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊"
      },
      methods:{
        btnClick(){
            console.log(this.$refs.aa.name)
        }
      },
      components:{
        cpn
      }
    })
</script>



05-(理解)子访问父-parent-root P68 - 01:04

$parent 和$root

<div id="app">
   <cpn></cpn>
</div>
<template id="cpn">
    <div>
      我是子组件
     <button @click="btnClick">按钮</button>
      <cpn1></cpn1>
    </div>
</template>

<template id="cpn1">
  <div>
    我是cpn的子组件
    <button @click="btnClick1">按钮</button>
  </div>

</template>
<!--使用vue-->
<script src="../js/vue.js"></script>
<script>

  let cpn1={
    template:"#cpn1",
    methods:{
      btnClick1(){
        //访问父组件是一个vue组件
        console.log(this.$parent)
        console.log(this.$parent.name)
      //  访问根组件$root
        console.log(this.$root,"root")
        console.log(this.$root.message,"root")
      }
    },

  };
    let cpn={
      template:"#cpn",
      data(){
        return{
          name:"我是子组件cpn的name"
        }
      },
      methods:{
        btnClick(){
          //访问父组件是一个vue实例
          console.log(this.$parent)
        }
      },

      components:{
        cpn1
      }

    };



    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊"
      },
      components:{
        cpn,

      }
    })
</script>



06-(掌握)slot-插槽的基本使用 P69 - 01:03



// <!--使得组件更具有扩展性-->
// 1、插槽的基本使用：组件中插入 <slot> </slot>
// 2、插槽的默认值 <slot><p>组件中不写，默认这个显示</p></slot>
// 3、如果有多个值 同时放到组件中替换时，一起作为替换元素

<div id="app">
    <cpn><button>按钮slot</button></cpn>
    <cpn><span>插槽slot</span></cpn>
    <cpn>
      <span>2222</span>
      <p>多个值</p>
    </cpn>
    <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <h1>我是组件</h1>
    <p>组件哈哈哈</p>
    <!--同一个组件使用多次，每一个都显示都不同,使用slot-->
    <slot><p>组件中不写，默认这个显示</p></slot><!--//预留，可以给一个默认值，-->
  </div>
</template>
<!--使用vue-->
<script src="../js/vue.js"></script>
<script>
 
  let cpn={
    template:"#cpn",
  };

    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊"
      },
      components:{
        cpn
      }
    })
</script>

07-(掌握)slot-具名插槽的使用 P70 - 00:02

<div id="app">
    <cpn><input slot="center" value="中间标题修改"></cpn>
    <cpn><button slot="left">左边返回</button></cpn>
</div>
<template id="cpn">
  <div>
     <h1>我是组件</h1>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>
<!--使用vue-->
<script src="../js/vue.js"></script>
<script>
    let cpn={
      template:"#cpn"
    };
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊"
      },
      components:{
        cpn
      }
    })
</script>



08-(理解)编译作用域的概念 P71 - 00:03