P2323 [HNOI2006]

元件可以訪問Vue例項資料嗎？
元件是一個單獨功能模組的封裝，有屬於自己的HTML模板，也有自己的資料data

元件中不能直接訪問Vue例項裡的資料，以下程式碼在元件是不能訪問到message的

元件的data引數
元件定義時也有一個data引數，但這個data引數不像Vue例項的data是一個物件型別，它這裡是一個函式型別，如果你定義成了一個物件型別，會報以下錯誤

該data函式需要返回一個物件，物件內部儲存著資料
示例程式碼：https://jsrun.net/EevKp/edit
const cpnC = Vue.extend({
template: "#cpn",
data(){
return {
title:"這裡是標題吧",
content:"這裡是內容哦!~~"
}
}
})
元件中的methods函式
用於定義一些事件處理的函式，同Vue例項裡的methods函式型別
示例程式碼：

https://jsrun.net/JevKp/edit
const cpnC = Vue.extend({
template: "#cpn",
data(){
return {
counter:0
}
},
methods:{
increment:function(){
this.counter++
},
decrement:function(){
this.counter--
}
}
})
父子元件
使用場景
比如一個商城的首頁，上面有一個輪播圖，下面有一個商品的列表

像這種頁面，我們在開發時，會在最外層元件(父元件)裡，向服務端一次請求到輪播圖，商品列表資料，然後將資料分別傳給輪播圖元件，商品列表元件；然後商品列表元件在將資料傳傳商品元件來進行整個頁面的渲染
如何通訊（傳遞資料）
Vue例項也可以看作一個父元件

父傳子
通過prots向子元件傳資料（prots為proterties的簡寫，意為屬性）
props的二種方式
1.一種是可以傳一個字串陣列，裡面第一項對應變數名
將godos和message傳給子元件進行渲染，示例程式碼：http://jsrun.net/5PvKp/edit

//1.Vue.extend建立元件
const cpnC = Vue.extend({
template: "#cpn1",
props:['cgoods','cmessage']
})

//2.註冊元件
Vue.component('my-cpn', cpnC)

const app = new Vue({
el: "#app",
data: {
message: "我是message",
goods:["衣服","鞋子","帽子","短褲"]
}
})

2.第二種是傳一個物件型別，可以進行型別限制type和預設值default，是否必需reauired
type-指定引數的型別,有：String,Array,Boolean,Number,Date,Function,Symbol
default-指定預設值
reauired-指定是否必須要傳該引數，是boolean型別，傳(true或false)

const cpnC = Vue.extend({
template: "#cpn1",
props: {
//1.型別限制
// cgoods: Array,
// cmessage: String

    //2.提供預設值,沒傳時顯示
    cgoods:{
        type:Array,
        default:[]
    },
    cmessage:{
        type:String,
        default:"這裡是預設值",
        required:true
    }
}

})

props的一些使用示例
Vue.component('cnp',{
props:{
//1.基礎的型別檢查(null匹配任何型別)
propA:Number,
//2.多個可能的型別
propB:[String,Number],
//3.必填的字串
propC:{
type:String,
required:true
},
//4.帶有預設值的數字
propD:{
type:Number,
default:100
},
//5.預設值的物件，陣列或物件的需要返回一個函式
propE:{
type:Object,
default:function(){
return {name:"hello"}
}
},
//6.帶自定義驗證函式
propF:{
validator:function(val){
//這個val必須匹配下列陣列中的一個
return ['張三','李四','王五'].indexOf(val) !== -1
}
}
}
})
元件中駝峰標識,props中定義了cTitle,但在元件使用是需要變為:c-title,子元件中使用時又為cTitle

//1.Vue.extend建立元件
const cpnC = Vue.extend({
template: "#cpn1",
props: {
//駝峰標識
cTitle:{
type:String
}
}
})

//2.註冊元件
Vue.component('my-cpn', cpnC)

const app = new Vue({
el: "#app",
data: {
title:"我是駝峰標識"
}
})
子傳父
通過emit傳送自定義事件向父元件傳送訊息
示例程式碼：http://jsrun.net/J7vKp/edit

//1.Vue.extend建立元件
const cpnC = Vue.extend({
template: "#cpn1",
data: function () {
return {
students: [
{ id: "001", name: "關曉彤",imgUrl:"https://5b0988e595225.cdn.sohucs.com/images/20181224/ecf125cb199d4808a067f682c6c5e6c6.jpeg" },
{ id: "002", name: "迪麗熱巴",imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593861542943&di=9fe9365124a4aae6cc6cf483aa2a9e18&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fwh%3D680%2C800%2Fsign%3Dbb541c4377f40ad115b1cfe56f1c3de7%2F50da81cb39dbb6fde349ce5d0524ab18972b37be.jpg" },
{ id: "003", name: "鄭爽",imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593861570612&di=60b6d39dcbac9e1ea77b747d42f9f19d&imgtype=0&src=http%3A%2F%2Ftc.sinaimg.cn%2Fmaxwidth.800%2Ftc.service.weibo.com%2Fmmbiz_qpic_cn%2F1ab918195e7c8a94cc6c95182fbde786.jpg" },
{ id: "004", name: "楊冪",imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593861759697&di=6771e7279c145513968ce221a29a6b0e&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20130816%2FImg384334041.jpg" }
]
}
},
methods: {
btnclick(item) {
//發射事件，自定義事件
this.$emit("itemclick", item)
}
}
})

const app = new Vue({
el: "#app",
components: {
"my-cpn": cpnC
},
data: {
message: "",
imgUrl:""
},
methods: {
btnClick: function (item) {
this.message = "你選擇了：" + item.name + ",學號:" + item.id
this.imgUrl=item.imgUrl
}
}
})
元件中的雙向繫結
不能直接繫結props裡的屬性，要繫結data裡定義的屬性
示例：http://jsrun.net/R7vKp/edit

//1.Vue.extend建立元件
const cpnC = Vue.extend({
template: "#cpn",
data(){
return {
dnumber:this.number1
}
},
props:{
number1:{
type:Number,
default:0
}
},
methods:{
numInput:function(event){
this.dnumber=event.target.value
}
}
})

const app = new Vue({
el: "#app",
components:{
'my-cpn':cpnC
},
data: {
num: 1
}
})

父元件訪問子元件($children或$refs)
$children-是一個數組，通過下標訪問，這種方式不建議使用，因為元件變化維護後，相應的下標也要變化，後期難維護
示例程式碼：http://jsrun.net/VcvKp/edit

const app = new Vue({
el: "#app",
methods:{
btnClick:function(){
//1.$children是一個數組
alert(this.$children[0].title)
},
},
components:{
'my-cpn':{
template:"#cpn",
data(){
return {
title:"我是子元件的標題"
}
}
}
}
})
$refs-通過在元件上定義ref進行訪問
示例程式碼：http://jsrun.net/7cvKp/edit

const app = new Vue({
el: "#app",
methods:{
btnClick:function(){
//1.$children是一個數組
//alert(this.$children[0].title)

        alert(this.$refs.aaa.title)
    },
},
components:{
    'my-cpn':{
        template:"#cpn",
        data(){
            return {
                title:"我是子元件的標題"
            }
        }
    }
}

})
子元件訪問父元件($parent)
子元件通過$parent訪問父元件
$root可以用來訪問根元件，一般是Vue例項
示例程式碼：http://jsrun.net/dcvKp/edit

{{message}}

{{message}}

P2323 [HNOI2006]

[2021.8集訓Day1/JZOJ.1255/洛谷P2323/HNOI2006]公路修建問題

【P2323 [HNOI2006]公路修建問題】題解

洛谷 P2319 [HNOI2006]超級英雄

題解 [HNOI2006]最短母串問題

NC20047 [HNOI2006]公路修建問題

P2319 [HNOI2006]超級英雄

[HNOI2006]公路修建問題

P2323 [HNOI2006]

{{message}}

{{message}}

相關推薦