Vue3中的组件间传值、依赖注入、双向绑定、获取dom

1.组件间传值、依赖注入、双向绑定

	Vue2	Vue3
父组件向子组件传值	1.子组件标签上使用自定义属性名来传递父组件data中的数据； 2.子组件内部添加props字段定义数组或者对象，用自定义的属性名来接受父组件的传值； 3.使用时与使用data字段的数据一样；	1.子组件标签上使用自定义属性名来传递父组件data中的数据； 2.子组件内部添加props字段定义数组或者对象，用自定义的属性名来接受父组件的传值； 3.在模板中使用时与之前一样，但在setup函数中,是通过setup的第一个函数props来获取得到的数据；
子组件向父组件传值	1.在子组件的事件监听函数中使用this.$emit定义自定义事件，自定义事件第一个参数是事件名，第二个是传入的参数； 2.在子组件标签上添加自定义事件，并设置自定义事件触发在父组件指定的函数； 3. 在父组件的methods字段添加自定义函数触发的函数，函数的参数是第一步中传递来的数据；	1.在子组件的事件监听函数中使用setup的第二个参数(context对象)的emit函数来定义自定义事件，自定义事件第一个参数是事件名，第二个是传入的参数； 2.子组件添加emits字段来设置发射的自定事件； 3.在子组件标签上添加自定义事件，并设置自定义事件触发在父组件指定的函数； 4. 在父组件的methods字段添加自定义函数触发的函数，函数的参数是第一步中传递来的数据；
总线传值	1.创建一个全局的空组件对象 2.在要发送数据的组件内部使用空组件对象.$emit(’自定义事件‘,传递的数据)； 3.在要接受数据的组件的created钩子函数中使用空组件对象.$on('自定义事件',函数-参数为传递的数据)	将总线传值移除了vue的核心文件
双向数据绑定	1.子组件标签上使用(v-model='要传递的数据')绑定父组件要传递的数据; 2.子组件props字段接收，默认接受v-model的属性名为value(必须为value)； 3.在事件函数中发射自定义事件(自定义的事件名必须为input，第二个参数为更改父组件传过来的数据)	1.子组件标签通过(v-model:自定义接受属性名=‘传递的属性值’)来传递要双向绑定的数据； 2.子组件通过props的自定义属性名接受； 3.在事件函数中发射自定义事件(自定义的事件名必须为update:自定义属性名，第二个参数为更改父组件传过来的数据) 4.在子组件的emits字段中定义数组来管理发射的自定义事件
依赖注入	1.要传递数据的组件：使用provide字段函数，返回一个对象，对象属性名为接受的字段名，属性值是接受的字段值； 2.接受的子孙组件：使用inject的数组字段，使用字段名接收,然后在页面使用时候要加上this,且不具有响应式特点；	1.要传递给子孙组件的组件：在setup的函数中使用Vue.provide('自定义字段名'，字段值) 2.接受的子孙组件：在setup的函数中使用一个变量接收Vue.inject(['count'])；

2.查找dom

vue2：给标签添加ref属性并设置一个查找名，然后使用this.$refs.查找名来获取dom；

vue3：给标签添加ref属性并设置一个响应式数据为ref属性的值；在事件函数中使用该响应数据.value来获取dom节点；在setup函数中该响应数据.value显示为响应数据的值；

绑定了ref属性的响应式数据不能再在页面渲染的时候使用；

 2.1代码

<div id="root">
    父组件信息：{{count}}这个count绑定了ref，就不能渲染
    <hr>
    {{num}}
    <!-- 1.ref绑定的是一个响应式数据 -->
    <button ref="count">点击增加</button>
    <br>
</div>

// 根组件
const app = Vue.createApp({
    setup() {
        var count = Vue.ref(0);
        var num = Vue.ref(0);
        // 参数1 字段名 参数2 字段值
        Vue.onMounted(()=>{
            // 2.获取标签，通过绑定数据的value属性
            console.log(count.value);
            count.value.addEventListener('click',()=>{
                add();
            })
        })
        function add(params) {
            num.value++;
        }
        return {
            count,
            num
        }
    }
})

const vm = app.mount('#root');