正常的頁面跳轉與傳參,推薦方法2、3,不用特別修改路由
第一種this.$router.push(`,
路由配置:
path: '/describe/:id',
name: 'describe',
component: describe
接收引數:
this.$route.params.id
第二種this.$router.push({
name: 'describe',
params: {
id: id
路由配置
path: '/describe',
name: 'describe',
component: describe
獲取引數:
this.$route.params.id
第三種this.$router.push({
path: '/describe',
query: {
id: id
路由配置:
path: '/describe',
name: 'describe',
component: describe
引數獲取:
this.$route.query.id
父頁面與子頁面之間傳參
父頁面區域設定
其中 @my-event="getmyevent" 用來給子頁面呼叫的
子頁面呼叫方法
this.$emit('my-event','refresh');
//其中 refresh 是引數
父頁面接收,其中id 對應引數 refresh,可多個,按順序輸入輸出引數
getmyevent: function(id) {
this.upstate(id)
父頁面呼叫子頁面方法
this.$refs.childrenmode.loadselect();
其中子頁面需要有 loadselect 方法,否則會報錯,需要注意的是,這個子頁面必須是已經載入好的。
prop和$ref之間的區別:
prop 著重於資料的傳遞,它並不能呼叫子元件裡的屬性和方法。像建立文章元件時,自定義標題和內容這樣的使用場景,最適合使用prop。
$ref 著重於索引,主要用來呼叫子元件裡的屬性和方法,其實並不擅長資料傳遞。而且ref用在dom元素的時候,能使到選擇器的作用,這個功能比作為索引更常有用到。
prop使用樣例
子 export default {
name:'my_test_child',
data() {
return {
my_msg:''
props:{
msg:{
type: string,
default: '未初始化',
watch:{
// msg(val){
// console.log('監視重新整理資料');
// this.my_msg=val;
methods: {
refresh_data:function(){
console.log('#ref 主動重新整理資料');
this.my_msg=this.msg;
父父傳子 測試
type="text"
v-model="tm"
@change="myrefresh"
ref="child"
:msg="tm"
import children from './personmode/children.vue';
export default {
components:{
'mychild':children
data() {
return {
tm:''
methods: {
myrefresh:function(){
console.log('變化');
this.$refs.child.refresh_data();
vue跨域解決方法
vue專案中,前端與後台進行資料請求或者提交的時候,如果後台沒有設定跨域,前端本地除錯 的時候就會報 no access control allow origin header is present on the requested resource.這種跨域錯誤。要想本地正常的除錯,解決的辦法有三...
VUE 跨域設定
相信很多小夥伴在開發過程中遇到比較頭疼的事情之一,就是在本地與非本地環境中的介面進行聯調 至少我一廂情願的這麼認為otz 在最近的開發過程中,不可避免的,我也遇到了這個問題,畢竟在本地yy寫完 再上傳測試實在是太。蛋疼。接下來,我將就我遇到的問題以及解決方式與眾位小夥伴分享 掌聲 在此專案中,我使用...
vue實現跨域
在請求的資源上沒有 訪問控制允許源 標頭。因此,http loalhoal 8081 是不允許訪問的。出現這個報錯就說明,瀏覽器限制了跨域,需要設定跨域 一 後台更改header header access control allow origin 允許所有 訪問 header access con...