vue面试题（day04）

首先在父组件中引入子组件，并在引入的子组件标签内插入需要的html元素，在子组件中把需要用插槽的地方用<slot>标签替代

父组件
  <template v-slot:名称>
        内容
    </template>
    子组件
     <slot name="name名称"></slot>

//子组件
    <footer>
           <ul>
            <li v-for="(item,index) in data" :key="index">
            <slot :item="item">
                {{ item.hobby}}——{{ item.check}}
            </slot>
            </li>
           </ul>
           <span>{{ nums }}</span><button>+</button>
        </footer>

//父组件
 <template v-slot="{item}">
        {{ item.hobby }}
 </template>

// 先定义一个空的响应式数据ref定义的
      // setup中返回该数据，你想获取哪个dom元素，在该元素上使用ref属性绑定该数据即可。

<template>
  <h1 ref="box">Ref属性获取dom</h1>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
    setup () {
        let box = ref(null)
        onMounted(function () {
            console.log(box.value);
        })
        return {
            box
        }
    }
}
</script>

使用ref绑定一个函数，在函数里把dom添加到数组里面

<template>
  <h3 :ref="getlist" v-for="index in 3">我是一组元素{{index}}</h3>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
    name: 'Ref',
    setup () {
        // 获取v-for遍历的元素
        // 定义一个空数组，接收所有的LI
        // 定义一个函数，往空数组push Dom
        let listDom = []
        const getlist = (el) => {
            listDom.push(el)
        }
        console.log(listDom);
        return {
            getlist
        }
    }
}
</script>

单个元素： 先声明ref响应式数据，返回给模板使用，通过ref绑定数据
    遍历的元素：先定义一个空数组，定一个函数获取元素，返回给模板使用，通过ref绑定这个函数

const app = createApp(App)
// 配置全局变量 页面中使用 inject 接收
app.provide('global',{
  store,
  axios
})
app.use（）进行使用

const store = createStore({
    state () {
        return {
            base:"",//基本数据
        }
    },
    mutations: {
        /*修改基础数*/
        changeBase(state,base) {
            state.base=base;
        },
    }
})
export default store;

store.commit("changeBase","test")//设置全局变量的值
let data=store.state.lnglat//取用全局变量的值

1. 需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，
给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化。
 2. compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定
  更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。
3.watcher订阅者是observer和compile之间通信的桥梁，主要做的事情是：1*.在自身实例化时往属性订阅器里面添加自己
  2*.组件自身必须有一个update()方法.3*待属性变动dep.notice()通知时，能调用自身的update（）方法，
  并触发complie中绑定的回调，则功成身退。
4. MVVM作为数据绑定的入口，整合observer、compile和watcher三者，通过observer来监听自己的model数据变化，
通过compile来解析编译模板指令，最终利用watcher搭起来Observer和Compile之间的通信桥梁，达到数据变化，
视图更新，视图交互话变化，数据model变更的双向绑定效果。

1.父组件使用子组件，在子组件标签里面，通过标签属性的方式进行数据传递
    <template>
      <children :list="list"></children>
    </template>
    2.在子组件引入import { defineProps } from 'vue'
      <script setup>
     import { defineProps } from 'vue'
    const props = defineProps({
            list: {
            type: Array,
            default: () => []
           }
          })
      </script>
       defineProps方法定义变量名进行接收，template模板中进行使用。

<template>
       <div>
          <input v-model="value" type="text" placeholder="请输入" />
          <button @click="handleAdd"> 添加 </button>
        </div>
      </template>
      <script setup>
        import { ref, defineEmits } from 'vue'
        const value = ref('')
        const emits = defineEmits(['add'])
        const handleAdd = () => {
          emits('触发的方法', 传递的参数)
        }
      </script>

父组件中使用子组件的标签
 在 子组件 setup 方法内使用props 来接收父组件传过来的数据。
  <template>
    <div>
      <Article :msg="name"></Article>
    </div>
  </template>
  <script>
  import Article from '@/components/Article.vue' 
  export default {
    components: {
      Article
    },
    setup() {
      return {
        name: '渐行渐远渐无书，水阔鱼沉何处问'
      }
    }
  }

<template>
  <div>
    {{msg}}
    <button @click="sendToParent">子组件向父组件传递数据</button>
  </div>
</template>
<script>
export default {
  props:['msg'],
  setup(props, content) {
    console.log(props.msg)
    function sendToParent() {
      content.emit('change')
    }
    return {
      sendToParent
    }
  }
}
</script>