//provide,inject能够跨组件将数据传递，就是说如果有像需要子传父this.$emit的多层，才能把数据传递的情况使用很方便
//需要注意的是不能直接在provide函数里面写函数，因为在函数里面this指向window,所以要在methods方法里面写函数，然后命名：this引用这个函数
//另外由于基本数据类型有失去响应性的原因，就需要用计算属性写函数的形式成为引用类型
<!DOCTYPE html>
<html lang="en">
<head>
? <meta charset="UTF-8">
? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? <title>Document</title>
</head>
<body>
? <div id="app">
? ? <div>根</div>
? ? <div>{{ appMessage }} <button @click="appMessage = '你好'">修改message</button></div>
? ? <first></first>
? </div>
? <script src="./lib/vue.global.js"></script>
? <script>
? ? const stu = {
? ? ? name: '张三',
? ? ? nickname: this.name
? ? }
? </script>
? <script>
? ? Vue
? ? ? .createApp({
? ? ? ? data() {
? ? ? ? ? return {
? ? ? ? ? ? appMessage: '这是 App 在 data 中定义的 message',
? ? ? ? ? ? appTodos: [],
? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? todoAdd() {
? ? ? ? ? ? this.appTodos.push(54)
? ? ? ? ? },
? ? ? ? },
? ? ? ? provide() {?
? ? ? ? ? return {
? ? ? ? ??
? ? ? ? ? ? message: Vue.computed(() => this.appMessage),
? ? ? ? ? ? todos: Vue.computed(() => this.appTodos),
? ? ? ? ? ? add: this.todoAdd
? ? ? ? ? }
? ? ? ? },
? ? ? })
? ? ? .component('first', {
? ? ? ? template: `<div>第一层<second></second></div>`,
? ? ? })
? ? ? .component('second', {
? ? ? ? template: `<div>第二层<third></third></div>`,
? ? ? })
? ? ? .component('third', {
? ? ? ? template: `<div>
? ? ? ? ? 第三层
? ? ? ? ? 共享到的根数据是: {{ message }}，数组长度: {{ todos.length }}
? ? ? ? ? <fourth></fourth>
? ? ? ? </div>`,
? ? ? ? inject: ['message', 'todos'],?
? ? ? })
? ? ? .component('fourth', {
? ? ? ? template: `
? ? ? ? ? <div>第四层</div>
? ? ? ? ? <button @click="add">使用祖先节点中共享的方法</button>
? ? ? ? `,
? ? ? ? inject: ['add'],
? ? ? })
? ? ? .mount('#app')
? </script>
</body>
</html>