做网站赚不到钱了,做一个门户网站多少钱,wordpress获取tags,wordpress停止更新目录
create-vue创建项目
一. 父子通信
1. 父传子
2. 子传父 二. 模版引用(通过ref获取实例对象)
1.基本使用 2.defineExpose
三. 跨层通信 - provide和inject
1. 作用和场景
2. 跨层传递普通数据
3. 跨层传递响应式数据
4. 跨层传递方法 create-vue创建项目 npm ini…目录
create-vue创建项目
一. 父子通信
1. 父传子
2. 子传父 二. 模版引用(通过ref获取实例对象)
1.基本使用 2.defineExpose
三. 跨层通信 - provide和inject
1. 作用和场景
2. 跨层传递普通数据
3. 跨层传递响应式数据
4. 跨层传递方法 create-vue创建项目 npm init vuelatest 一. 父子通信
1. 父传子 父组件中给子组件绑定属性 子组件内部通过props选项接收数据 // 父组件
script setup
import sonVue from ./son.vue;
/script
templatesonVue msgthis is msg /
/template
style scoped/style
// 子组件
script setup
//子组件内部通过props选项接收数据
const props defineProps({msg: String,
});
/script
templatediv{{ msg }}/div
/template
style scoped/style2. 子传父 父组件中给子组件标签通过绑定事件 子组件内部通过 emit 方法触发事件 // 父组件
script setup
import sonVue from ./son.vue;
// 获取传递子组件传递的值 val
const getMessage (val) {console.log(val);
};
/script
template!-- 1.绑定自定义事件 getMessage --sonVue getMessagegetMessage /
/template
style scoped/style// 子组件
script setup
//2. 生成emit方法
const emit defineEmits([getMessage]);const sendMsg () {//3.触发自定义事件,并传递参数emit(getMessage, this is msg);
};
/script
templatebutton clicksendMsg测试/button
/template
style scoped/style二. 模版引用(通过ref获取实例对象) 概念通过 ref标识 获取真实的 dom对象或者组件实例对象 1.基本使用 调用ref函数生成一个ref对象 通过ref标识绑定ref对象到标签 script setup
import { ref } from vue;
//1.调用ref函数得到ref对象
const TestRef ref(null);//输出得到一个RefImpl对象
console.log(TestRef);
/scripttemplate!-- 2. 通过ref标识绑定ref对象 --div refTestRef测试一下/div
/template
style scoped/style2.defineExpose 默认情况下在 script setup语法糖下组件内部的属性和方法是不开放给父组件访问的为了显式暴露某些属性或方法可以使用 defineExpose常用于组件上绑定一个ref属性,来获取需要的某些属性或方法 // 子组件
script setup
import { ref } from vue;
//方法
const count ref(0);
const setCount () {count.value;
};
//值
const a ref(this is test data);
const b ref(2);
defineExpose({a,b,setCount,
});
/scripttemplatebutton clickcountcount/button
/template
style scoped/style
//父组件/页面
script setup
import TestDefineExpose from ./components/test2/TestDefineExpose.vue; //引入const onTest () {console.log(Exposeref.value.a);console.log(Exposeref.value.b);console.log(Exposeref.value.setCount);
};
/scripttemplate
TestDefineExpose refExposeref /button clickonTest/button
/template
三. 跨层通信 - provide和inject
1. 作用和场景 顶层组件向任意的底层组件传递数据和方法实现跨层组件通信 2. 跨层传递普通数据 实现步骤 顶层组件通过 provide 函数提供数据 底层组件通过 inject 函数提供数据 3. 跨层传递响应式数据 在调用provide函数时第二个参数设置为ref对象 4. 跨层传递方法 顶层组件可以向底层组件传递方法底层组件调用方法修改顶层组件的数据
