Vue基本语法day06

版权声明：转载-复用,请联系博主微信:qiang510939237 https://blog.csdn.net/qiang510939237/article/details/89442574

一. 通信机制

1. 父传子:
	 1.1  通过属性,父组件将数据传递给子组件  :msg = 'pmsg'
	 1.2  子组件通过 props 配置项,指定一下要接收的数据 props : [ 'msg' ]

2. 子传父:
	 2.1 父组件准备一个方法
	 	methods: { pfn(res) { console.log('父组件接收到的 : ', res) } }
	 2.2 通过自定义事件,将方法传递给子组件(子组件接收一下) 
	 	 	@fn="pfn"
	 2.3 触发这个 fn事件, 等同于调用 pfn 方法
	 created(){ this.$emit('fn','我是子组件里的信息') }

3. 非父子
	非父子之间传递信息, 通过 `事件总线` (event bus)
	事件总线, 其实就是 空的vue实例
	 3.1 实例化事件总线  const bus = new Vue()
	 3.2 发送数据 - 触发事件  bus.$emit('唯一标识',要传递的数据)
	 3.3 接收数据 - 注册事件  bus.$on('唯一标识', res => { })

二. 局部组件

	 <div id="app">
       <one></one>
     </div>
     
    <script src="./vue.js"></script>
    <script>
    
      Vue.component('one', {
        template: `
      		<div> 子组件 :  </div>
        `
      })

      const vm = new Vue({
        el: '#app',
        data: {},
        //  filters
        components: {
          one: {
            template: `<h1>我是局部组件</h1>`,
            data() {
              return {}
            },
            computed: {}
          }
        }
      })
    </script>

三. refs

	<!-- 
        refs : 是一个对象格式,它里面都是一些注册过 ref的元素/组件
        作用 : 获取DOM元素/组件 (类似 id)

        步骤  : 
        1. 先注册 ref    ref='c'
        2. 获取   this.$refs

      -->
    <div id="app">
     	 <!-- // refs
	     {
	      p : <p ref='p'>我是p标签</p>,
	      d : <div ref='d'>我是div标签</div> 
	     } -->
	     
      <p ref="p">我是p标签</p>
      <div ref="d">我是div标签</div>
      <child ref="c"></child>
    </div>
    
    <script src="./vue.js"></script>
    <script>
      Vue.component('child', {
        template: `
       <div> 子组件 :  </div>
        `,
        data() {
          return {
            num: 1000
          }
        }
      })

      const vm = new Vue({
        el: '#app',
        data: {},
        // 数据响应之后 触发
        created() {},
        // 操作DOM
        mounted() {
          console.log(this.$refs)
          console.log(this.$refs.p)
          console.log(this.$refs.d)
          console.log(this.$refs.c)
          console.log(this.$refs.c.num)
        }
      })

      // 组件
      // 看作是一个个可复用的ui模块
      // 组件 => vue实例
    </script>

四. 路由

   <!-- 
     准备工作:
       1. 安装 : npm i vue-router 
       2. 引入
       3. 实例化路由& 路由 挂载vue实例上
     具体步骤:
      1. 入口 url
      2. 匹配
      3. 组件
      4. 出口
   -->

    <div id="app">
      <!-- 第一步 : 入口 url 手动写 -->

      <!-- 注意点1  -->
      <!-- 声明式导航 -->
      <!-- 
        router-link ==> a标签
        to ==> href
      -->
      <router-link to="/one">我是One</router-link>

      <!-- 第四步 : 出口 占位置-->
      <router-view></router-view>
    </div>
    <script src="./vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script>
      // 第三步 : 组件
      const One = {
        template: `<div>子组件</div>`
      }
      // const One = Vue.component('one', {
      //   template: `<div>子组件</div>`
      // })

      // 实例化路由
      const router = new VueRouter({
        // 第二步 : 路由匹配规则
        routes: [
          {
            path: '/one',
            component: One
          }
        ]
      })

      const vm = new Vue({
      	// 将路由挂载到 vue实例上
        router,
        el: '#app',
        data: {}
      })
    </script>