Prefácio:
Use nossas instruções personalizadas em vue3.0.
Etapas de implementação: (definir globalmente os atributos personalizados do clique)
1. diretivas src / nova pasta , novo index.js
export default (app) => {
//自定义组件
app.directive('demo', (el, binding) => {
el.addEventListener('click', () => {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
})
}
2. Em main.js
import directives from './directives/index.js'
const app = createApp(App)
directives(app)3. Uso da página
<el-button v-demo="{ color: 'white', text: 'hello!' }">自定义指令</el-button>4. Clique no botão para exibir em f12
Introdução oficial: clique para entrar
Detalhes oficiais da introdução:
Taquigrafia de função
No exemplo anterior, você pode desejar acionar o mesmo comportamento no momento da mounted soma updatede não se importar com outras funções de gancho. Então você pode conseguir isso passando esta função de retorno de chamada para a instrução:
app.directive('pin', (el, binding) => {
el.style.position = 'fixed'
const s = binding.arg || 'top'
el.style[s] = binding.value + 'px'
})
# Object literal
Se a instrução requer vários valores, você pode passar um literal de objeto JavaScript. Lembre-se de que a função de instrução pode aceitar todas as expressões JavaScript válidas.
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
app.directive('demo', (el, binding) => {
console.log(binding.value.color) // => "white"
console.log(binding.value.text) // => "hello!"
})
#Use em componentes
E não prop de atributo Da mesma forma, quando usado na montagem, a instrução personalizada sempre será aplicada na montagem do nó principal.
<my-component v-demo="test"></my-component>
1
app.component('my-component', {
template: `
<div> // v-demo 指令将会被应用在这里
<span>My component content</span>
</div>
`
})
Ao contrário dos atributos, as instruções não podem v-bind="$attrs" ser passadas para outro elemento.